Vertiefte Kenntnisse von rem in CSS und Layoutmethoden auf mobilen Endgeräten-CSS-Tutorial-php.cn

Vertiefte Kenntnisse von rem in CSS und Layoutmethoden auf mobilen Endgeräten

yulia

Freigeben： 2018-09-17 16:15:08

Original

1548 Leute haben es durchsucht

Ich glaube, jeder kennt px, aber wenn es um rem geht, wissen es einige Leute nicht. Der heutige Artikel stellt hauptsächlich vor, was rem und em sind und welche Layoutmethoden sie in mobilen Endgeräten haben. Ich hoffe, dass sie für Sie hilfreich sind.

1. Was ist Rem?

rem ist ein neu hinzugefügtes Einheitenattribut (Schriftgröße des Stammelements) in CSS3, bei dem es sich um eine Einheit handelt, die entsprechend der Schriftgröße des Stammknotens der Seite konvertiert wird. Wurzel! ! ! ! ! ! ! ! ! Der Wurzelknoten, der HTML ist.

Beispiel: (Der Stammknoten im folgenden Beispiel ist HTML und seine Schriftgröße beträgt 100 Pixel, sodass der Rem-Satz für die Elemente unter dem Stammknoten 1rem=100 Pixel beträgt.)
Der Anfangswert von rem Es ist 16px, was bedeutet, dass, wenn die Schriftgröße des Wurzelknotens nicht festgelegt ist, 1rem=16px

<html>
    <head>
        <style>
            html,body{ font-size: 100px;  }
            header{ height: 1rem;width: 1rem;  }  
        </style>
    </head>
    <body></body>
    <header></header>
</html>

Nach dem Login kopieren

2. Was ist em

em? Auch eine relative Einheit. Die em-Einheit ist die Einheit, die basierend auf der Schriftgröße des übergeordneten Elements konvertiert wird.
1. Der Wert von em ist nicht festgelegt;
2.

Übergeordneter Knoten
Beispiel:

<header style="font-size:100px;">//父元素的字体大小是100px
    <div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>

Nach dem Login kopieren

3. Fähigkeiten zur Entwicklung mobiler Seiten:

Untersuchen Sie zunächst die Nutzung des Benutzers und fassen Sie die allgemeinen Geräte zusammen verwenden einige Benutzer?
Zum Beispiel: Die meisten meiner aktuellen Benutzer verwenden drei Arten von Mobiltelefonen. Wir ermitteln zunächst die Auflösung jedes Mobiltelefons im Internet.

Listen Sie sie alle auf und schreiben Sie dann eine Medienabfrage (da verschiedene Mobiltelefone unterschiedliche Auflösungen haben. Wenn Sie also Pixel verwenden, ist die Anzeige beispielsweise dieselbe. ~ Wenn Kinder beispielsweise essen, ist die Kantinenetiketten für Kinder Es gibt ein gedämpftes Brötchen, aber einige Kinder essen viel und andere nur eine kleine Menge, sodass sie möglicherweise nicht genug essen oder nicht essen können, was zu Abfall führt. Also kam die Cafeteria-Dame auf eine Idee . Kleine Freunde können ein Dampfbrötchen, ein halbes Dampfbrötchen mit einem Gewicht von weniger als 50 Pfund und zwei Dampfbrötchen mit einem Gewicht von mehr als 60 Pfund erhalten.)

Meine Benutzergruppen sind wahrscheinlich diese drei . Gerät
Schätzung der Schriftgröße des Gerätenamens in px
iphone5 320568 Schriftgröße: 12px; 1rem=12px
iphone6 Plus 414 * 736 Schriftgröße: 16 Pixel; 1rem = 16 Pixel Wählen Sie zuerst die Größe von Dampfbrötchen aus)
Priorisieren Sie das Schreiben eines Satzes von Vorlagen und schreiben Sie dann Medienabfragen für andere Geräte basierend auf diesem Satz von Vorlagen

Priorisieren Sie das Schreiben von Medienabfrage-Tags auf der Seite

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

Nach dem Login kopieren

width – die Breite des Viewport-Geräts

height – die Höhe des Viewport-Geräts

initial-scale – das anfängliche Skalierungsverhältnis

minimum-scale – der minimale Maßstab, den der Benutzer zoomen darf bis

maximum-scale – der Benutzer darf zoomen. Das maximale Verhältnis zu
user-scalable – ob der Benutzer manuell skalieren kann

wird oben zugewiesen, schreiben Sie die Medienabfrage auf diese Weise

html,body{ height: 100%; padding: 0; font-size: 14px;}//Beachten Sie, dass der ursprüngliche Stil oben geschrieben werden muss! ! ! ! Wenn es unten in die Medienabfrage geschrieben wird, deckt es die oben stehende Medienabfrage ab (da es sich um ein Cascading Style Sheet handelt)

@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

Nach dem Login kopieren

Weil oben eine Reihe von Anfangsvorlagen geschrieben ist, weil die Anfangsvorlagen alle sind px, im Artikel Am Anfang haben wir betont, warum px nicht verwendet werden kann, daher müssen wir die px auf der Seite in den entsprechenden REM-Wert konvertieren

Beispiel:

header{
    width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}

Nach dem Login kopieren

Ändern Sie alle Höhe und Breite in px bis Damit ist die Anpassung von rem an drei Geräte abgeschlossen.

Das obige ist der detaillierte Inhalt vonVertiefte Kenntnisse von rem in CSS und Layoutmethoden auf mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!