So machen Sie WordPress responsive

Wie erstelle ich ein responsives WordPress-Theme/eine responsive Vorlage?

In dieser Zeit wagen diejenigen, die WordPress nicht zum Erstellen einer Website verwendet haben, nicht zu sagen, dass sie eine Website erstellt haben. Was ist WordPress? WordPress ist das weltweit bekannteste Website-Content-Management-System (oder Blog/Blog-System), kurz WP genannt. Relevanten Umfragen zufolge erreichte WordPress im Jahr 2015 einen weltweiten Marktanteil von 48 % und es ist weiterhin der weltweite Champion bei Open-Source-Website-Systemen. Und es wächst immer noch rasant ... Wenn man sich das inländische Open-Source-CMS ansieht, gibt es nur wenige, die wirklich überleben und auf dem neuesten Stand bleiben. Können Dongyi, Dedecms, PHPCMs, Imperial CMS, PHPWind, Discuz usw., die einst allmächtig waren, noch überleben?

Werkzeuge/Materialien

HTML5

CSS3

Moderne Browser wie: Chrome, Firefox, Edge usw.

Verwandte Empfehlungen: „WordPress-Tutorial“

Methoden/Schritte

1. Einfach ausgedrückt, im Kopf des Webs Seite (< ;head> 9c3bca370b5104690d9ef395f2c5f8d1), fügen Sie den folgenden Abfragecode hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2. Fügen Sie dann ein Medienabfrageelement zur CSS-Datei hinzu, wie zum Beispiel:

@media screen and (max-width:480px) {
//当浏览器屏幕小于480px时，此代码块生效
}
@media screen and (min-width:481px) and (max-width:720px) {
//当浏览器屏幕大于480px小于720px时，此代码块生效
}
@media screen and (min-width:721px) and (max-width:1079px) {
//当浏览器屏幕大于721px小于1079px时，此代码块生效
}

The Der Bereich kann auf der Grundlage der tatsächlichen Situation selbst geändert werden. OK, das ist der Unterschied zwischen Responsive und Non-Responsive. Ich glaube, dass Sie es bald beherrschen werden.

3. Nachdem wir die wichtigsten Punkte verstanden haben, können wir mit der Erstellung responsiver statischer Seiten beginnen. Dann legen Sie einfach die statische Seite auf WordPress-bezogene Funktionen und Schleifen. Wenn Sie eine statische HTML-Seite erstellt haben, können Sie unter „Häufig verwendete Funktionen bei der Entwicklung und Produktion von WordPress-Themes: openue.com/post/597“ Vorlagen erstellen.

Hinweise

Vermeiden Sie während des Entwurfsprozesses die Verwendung fester Breite und Höhe für CSS, verwenden Sie stattdessen Prozentsätze und verwenden Sie rem anstelle von px für Schriftarten.

Das obige ist der detaillierte Inhalt vonSo machen Sie WordPress responsive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!