Eine kurze Diskussion über adaptive Layoutprobleme auf Mobilgeräten (responsive, rem/em, Js-Dynamik)

Mit der Verbreitung von 3G nutzen immer mehr Menschen Mobiltelefone für den Internetzugang. Mobilgeräte überholen Desktop-Geräte als am häufigsten genutztes Endgerät für den Internetzugang. Daher stehen Webdesigner vor einem schwierigen Problem: Wie können sie die gleiche Webseite auf Geräten unterschiedlicher Größe darstellen? In diesem Artikel werden die Konzepte und Methoden des adaptiven Webdesigns beschrieben, das es Webentwicklern ermöglicht, denselben Webseitencode beizubehalten, um auf mehreren Geräten ein besseres Leseerlebnis zu bieten. Dieser Artikel stellt die Implementierungsmethode adaptiver Webseiten ausführlich vor und hofft, Ihnen bei Verwirrung zu helfen.

1. Fügen Sie dem HTML-Header Meta-Tags hinzu

Fügen Sie im HTML-Header ein Meta-Tag hinzu, also das Head-Tag, um dem Browser mitzuteilen, dass die Breite der Webseite der Breite des Gerätebildschirms entspricht und nicht skaliert wird. Der Code lautet wie folgt:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

Lassen Sie uns kurz die Bedeutung dieser Codezeile analysieren: width=device-width bedeutet, dass die Breite der Webseite der Breite des Gerätebildschirms entspricht, initial-scale=1.0 bedeutet, dass das anfängliche Zoomverhältnis der Seite auf 1 gesetzt wird, user-scalable=no bedeutet, dass Benutzern das Zoomen untersagt wird, maximum-scale=1.0 und minimum-scale=1.0 bedeuten, dass das maximale und minimale Seitenzoomverhältnis gesetzt wird. Da die wichtigsten Browser Meta-Tags in unterschiedlichem Ausmaß analysieren, sollten wir unser Bestes tun, um die Kompatibilität mit allen Browsern sicherzustellen.

2. Prozentuales Layout

Beim Seitenlayout trägt die Kombination aus relativer und absoluter Breite für das Layout zur Wartbarkeit der Webseite bei.

Die folgenden Abbildungen zeigen das Layout von Lagou.com auf iPhone5, iPhone6 ​​und iPhone 6 Plus. Es ist ersichtlich, dass sich die angezeigte Schriftgröße und der Abstand selbst bei demselben Satz von Webseitencodes mit der Bildschirmbreite des Geräts ändern. Der Teil innerhalb des roten Felds verwendet ein Prozentlayout, das die Wartbarkeit der Webseite verbessert.

3. Implementierung responsiver Seiten

Derzeit gibt es zwei gängige Möglichkeiten, um Reaktionsfähigkeit zu erreichen. Eine davon ist die Verwendung von Medienabfragen und die andere ist das Rasterlayout unter Bootstrap. Ich werde das Rasterlayout später bei der Einführung von Bootstrap vorstellen. Hier werde ich hauptsächlich darüber sprechen, wie Medienabfragen verwendet werden, um ein reaktionsfähiges Layout zu erreichen.

Medienabfragen, auch als @media-Abfragen bekannt, können unterschiedliche Stile für unterschiedliche Bildschirmgrößen festlegen. Besonders wenn Sie responsive Seiten entwerfen müssen, ist @media sehr nützlich. Wenn Sie die Größe des Browsers ändern, wird die Seite entsprechend der Breite und Höhe des Browsers neu gerendert. Da es sich um eine Stileinstellung handelt, fügen Sie den Code für die Medienabfrage einfach am Ende der CSS-Datei ein.

Damit Sie die Verwendung der Reaktionsfähigkeit besser verstehen, habe ich unten zwei Beispiele aufgeführt. Der erste Fall ist relativ einfach und realisiert die Funktion zum Ändern der Hintergrundfarbe des Hauptteils bei unterschiedlichen Seitenbreiten. Im zweiten Fall wird ein konkretes Projekt als Beispiel verwendet, was für Benutzer praktischer ist.

Beispiel 1:

Wenn die Seitenbreite weniger als 300 Pixel beträgt, ändern Sie die Hintergrundfarbe des Hauptteils in Rot:

@media screen und (max-width: 300px) {
    Körper {
         Hintergrundfarbe: rot;
    }
}

Wenn die Seitenbreite größer als 300 Pixel und kleiner als 600 Pixel ist, ändern Sie die Hintergrundfarbe des Hauptteils in Grün:

@media screen und (min-width: 300px) und (max-width: 600px) {
    Körper {
         Hintergrundfarbe: grün;
    }
}

Wenn die Seitenbreite größer als 600 Pixel ist, ändern Sie die Hintergrundfarbe des Hauptteils in Blau:

@media screen und (min-width: 600px) {
    Körper {
         Hintergrundfarbe: blau;
    }
}

Code-Erklärung:

Mit „Bildschirm“ sind Computerbildschirme, Tablets, Smartphones usw. gemeint. Mit „Min.-Width“ und „Max.-Width“ werden die minimale und maximale Breite der Seite auf dem Gerät definiert.

Beispiel 2: Responsive Umsetzung der Visual China Homepage

Schauen wir uns zunächst die Anzeigeeffekte dieser Seite in verschiedenen Fenstern an:

Wenn die Fensterbreite größer als 1200 Pixel ist, ist der Seitenstil wie folgt:

Wenn die Fensterbreite größer als 900 Pixel und kleiner als 1200 Pixel ist, ist der Seitenstil wie folgt:

Wenn die Seitenbreite weniger als 900 Pixel beträgt, ist der Seitenstil wie folgt:

Schauen wir uns als Nächstes die spezifische Codeimplementierung an:

Der HTML-Code lautet wie folgt: Beachten Sie, dass es mehrere Bilder und mehrere Spalten gibt

<div Klasse="Gruppenwrap">
    <div Klasse="Gruppe">
        <div Klasse="col">
            <div Klasse="img_logo">
                <img src="img/8.jpg" alt="">
            </div>
        </div>
        <div Klasse="col">
            <div Klasse="img_logo">
                <img src="img/9.jpg" alt="">
            </div>
        </div>
    </div>
</div>

Der CSS-Code lautet wie folgt. Die Standardeinstellung ist, wenn die Seitenbreite größer als 1200 Pixel ist:

.Gruppenwrap{
    Breite: 100 %;
    Überlauf: versteckt;
}
.Gruppe{
    Breite: 1200px;
    Rand: 0 automatisch;
    Überlauf: versteckt;
}
.col{
    Breite: 280px;
    Rand: 10px;
    schweben: links;
}
.img_logo{
    Polsterung: 10px;
    Hintergrund: weiß;
}

Der Antwortcode lautet wie folgt. Fügen Sie ihn einfach am Ende der CSS-Datei ein:

/*Wenn die Seitenbreite zwischen 900px und 1200px liegt*/
@media screen und (min-width: 900px) und (max-width: 1200px) {
    .Gruppe{
        Breite: 900px;
    }
}
/*Wenn die Seitenbreite zwischen 600px und 900px liegt*/
@media screen und (min-width:600px) und (max-width: 900px) {
    .Gruppe{
        Breite: 600px;
    }
}

Zusammenfassung: Tatsächlich ist die Implementierung von responsiven Seiten sehr einfach. Solange Sie fleißig lernen und häufig üben, werden Sie es meistern können!

4. Verwenden Sie relative Schriftarten auf der Seite

Bei unserem normalen Layoutprozess für Webseiten verwenden wir für das Layout häufig die absolute Einheit Pixel (px). Ein solches Layout ist für die Implementierung unserer adaptiven Webseiten nicht geeignet. Daher führen wir nun zwei gängige absolute Einheiten ein: em und rem. rem (Schriftgröße des Stammelements) bezieht sich auf die Einheit der Schriftgröße relativ zum Stammelement. Einfach ausgedrückt ist es eine relative Einheit. Wenn Sie „rem“ sehen, denken Sie bestimmt an die Einheit „em“. „em“ (Schriftgröße des Elements) bezieht sich auf die Einheit der Schriftgröße im Verhältnis zum übergeordneten Element. Sie sind eigentlich sehr ähnlich, außer dass eine Berechnungsregel vom Stammelement und die andere vom übergeordneten Element abhängt.

1. Relative Längeneinheit em

Eigenschaften von em: ① Der Wert von em ist nicht festgelegt; ② em erbt immer die Schriftgröße des übergeordneten Elements.

Kommen wir ohne weitere Umschweife direkt zum Code:

HTML Quelltext:

<div Klasse="eins">
    <span>Erste Schicht</span>
    <div Klasse="zwei">
        <span>Zweite Schicht</span>
        <div Klasse="drei">
            <span>Dritte Schicht</span>
        </div>
    </div>
</div>

CSS Code:

Körper{
    Schriftgröße: 20px;
}
.eins{
    Schriftgröße: 1,5em;
}
.zwei{
    Schriftgröße: 0,5em;
}
.drei{
    Schriftgröße: 2em;
}

Ergebnis:

.eins ---> 30px 1,5 * 20 = 30px
.zwei ---> 15px 0,5 * 30 = 15px
.drei ---> 30px 2 * 15 = 30px

Code-Analyse:

em erbt die Schriftgröße des übergeordneten Elements. Bei den meisten Browsern ist die Standardgröße 16px, wenn keine Schriftgröße für den Text angegeben ist. Für das Div mit dem Klassennamen „one“ ist also „body“ das übergeordnete Element, also ist 1em = 16px. In diesem Fall ist die Schriftgröße von „body“ mit 20px angegeben, also ist für „.one“ 1em = 20px und dann 1,5em = 30px. Die Schriftgröße beträgt also 30px.

Für das Div mit dem Klassennamen zwei ist sein Vater eins. Da em die Schriftgröße des übergeordneten Elements erbt, 1em = 30px, dann 0,5em = 15px, beträgt die Schriftgröße von zwei also 15px.

Für das Div mit dem Klassennamen drei ist sein übergeordnetes Element zwei. Da em die Schriftgröße des übergeordneten Elements erbt, 1em = 30px, dann 0,5em = 15px, ist die Schriftgröße von zwei also 15px.

2. Relative Längeneinheit rem

rem ist eine in CSS3 neu hinzugefügte relative Einheit (root em), die große Aufmerksamkeit erregt hat. Wie unterscheidet sich diese Einheit von anderen? Der Unterschied besteht darin, dass die Schriftgröße eines Elements, wenn Sie sie mit „rem“ festlegen, zwar immer noch relativ ist, jedoch nur relativ zum HTML-Stammelement. Diese Einheit kombiniert die Vorteile der relativen und absoluten Größe. Sie kann verwendet werden, um alle Schriftgrößen proportional anzupassen, indem nur das Stammelement geändert wird. Gleichzeitig wird die Kettenreaktion vermieden, bei der die Schriftgrößen Schicht für Schicht zusammengesetzt werden.

Schauen wir uns das folgende Beispiel an:

HTML Quelltext:

<div Klasse="eins">
    <span>Erste Schicht</span>
    <div Klasse="zwei">
        <span>Zweite Schicht</span>
        <div Klasse="drei">
            <span>Dritte Schicht</span>
        </div>
    </div>
</div>

CSS Code:

html{
    Schriftgröße: 20px;
}
.eins{
    Schriftgröße: 1,5rem;
}
.zwei{
    Schriftgröße: 0,5rem;
}
.drei{
    Schriftgröße: 2rem;
}

Ergebnis:

.eins ---> 30px 1,5 * 20 = 30px
.zwei ---> 10px 0,5 * 20 = 10px
.drei ---> 40px 2 * 20 = 40px

Code-Analyse:

rem ist eine neue Einheit, die in CSS3 eingeführt wurde. Der Wert von rem ist immer relativ zur Schriftgröße, die im Stammelement html festgelegt ist. Wenn sie nicht festgelegt ist, beträgt die Standardschriftgröße in den meisten Browsern 16px, also 1rem = 16px;

Für ein Div mit dem Klassennamen eins gilt also: 1,5rem = 1,5 * 20 = 30px. Die anderen sind ähnlich und werden nicht im Einzelnen näher erläutert.

Zusammenfassung von em und rem:

„em“ legt die Schriftgröße relativ zu seinem übergeordneten Element fest, was ein Problem darstellt. Um ein Element festzulegen, müssen Sie möglicherweise die Größe seines übergeordneten Elements kennen. Wenn wir es mehrfach verwenden, kann dies zu unvorhersehbaren Fehlerrisiken führen. Rem ist relativ einfacher zu verwenden. Was mein Unternehmen betrifft, wird Rem in der tatsächlichen Projektentwicklung sehr häufig verwendet. Es wird geschätzt, dass sich inländische Designer in naher Zukunft genauso in Rem verlieben werden wie ausländische Designer.

5. Js setzt rem dynamisch, um eine mobile Schriftanpassung zu erreichen

Tatsächlich haben Sie nach so viel Reden vielleicht die Verwendung von REM verstanden, wissen aber immer noch nicht, wie Sie REM für eine mobile Anpassung verwenden. Der Grund, warum rem eine mobile Anpassung erreichen kann, liegt schließlich in seinen eigenen Eigenschaften: Es kann seinen Wert jederzeit entsprechend der Schriftgröße des Stammelements ändern. Die Bildschirmgrößen verschiedener gängiger Mobiltelefone sind in der folgenden Abbildung dargestellt:

Wir möchten eine mobile Anpassung erreichen, d. h. die Attributwerte von Schriftart, Abstand, Breite und Höhe der Seitenelemente können sich mit der Änderung der Bildschirmgröße des Mobiltelefons ändern. Als Nächstes sehen wir uns an, wie man mit Js REM dynamisch einstellt und eine mobile Anpassung erreicht. Der Js-Code lautet wie folgt:

//HTML-Element abrufen var html = document.getElementsByTagName('html')[0]; 
//Bildschirmbreite (kompatible Verarbeitung)
var w = Dokument.documentElement.clientWidth || Dokument.body.clientWidth;
//Die Zahl 750 basiert auf der tatsächlichen Größe Ihres Designs, der Wert hängt also von der Größe des Designs ab html.style.fontSize = w / 750 + "px";

Der obige Code verwendet Js, um die Breite des Gerätebildschirms zu ermitteln und ändert das Font-Siz-Attribut des Stammelements html dynamisch entsprechend der Bildschirmbreite. Beispiel: Beim iPhone 6 beträgt die Bildschirmgröße 750, also beträgt die Schriftgröße von HTML auf dem iPhone 6 1px, also 1rem = 1px; beim iPhone 5 beträgt die Bildschirmgröße 640, also beträgt die Schriftgröße von HTML auf dem iPhone 5 640/750 = 0,85333px, also 1rem = 0,85333px. Selbst wenn wir für ein Element die gleiche Größe und Einheit festlegen, wird es auf verschiedenen Geräten in unterschiedlichen Größen angezeigt. Beispielsweise beträgt die Breite von div{width:100rem} auf dem iPhone 6 100 Pixel und auf dem iPhone 5 100 * 0,85333 = 85,333 Pixel. Auf diese Weise haben wir tatsächlich mobile Anpassungsfähigkeit erreicht. Wie wäre es damit? Ist es nicht ganz einfach?

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.