1, rem
rem wird relativ zur Größe des Stammelements festgelegt und das Stammelement im Die Webseite bezieht sich auf Es ist HTML. Wir können die Größe von REM steuern, indem wir die Schriftgröße von HTML festlegen. Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html{
font-size:20px; }
p{
width: 600px;
overflow: hidden;
line-height: 1;
font-size: 1rem; }
</style></head> <body>
<p> 是啊啊啊
</p></body></html>Wenn Sie im HTML-Stammelement „font-size:20px“ festlegen, gilt 1rem = 20px. Wenn Sie also 10px festlegen, kann 1 rem nicht nur für die Schriftgröße verwendet werden kann auch für Längeneinheiten wie Breite verwendet werden. Zu diesem Zeitpunkt fragen Sie sich vielleicht, wie man eine solche Reaktionsfähigkeit erreichen kann. Daher müssen wir @media kombinieren, um die Größe des HTML-Stammelements festzulegen, sodass alle entsprechenden REM-Einheiten auf der Seite dem Stammelement folgen, zum Beispiel: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
Wenn Sie die Schriftgröße von HTML nicht festlegen, wird 16px als Basis verwendet. Der Vorteil gegenüber px liegt auf der Hand. Sie müssen nicht auf jedes Element unterschiedliche Größen anwenden. Die Kompatibilität ist ebenfalls sehr gut.
2. vw, vh
Obwohl die rem-Einheit immer noch sehr einfach ist, ist sie immer noch nicht einfach und grob genug VW- und VH-Einheit.
Breite relativ zum Ansichtsfenster. Das Ansichtsfenster ist in 100 VW-Einheiten unterteilt. Beispielsweise entspricht 1vw 1 % der Bildschirmbreite. Gehen Sie einfach zum Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
width: 20vh;
height: 30vw;
line-height: 1;
font-size: 1vw;
background: #FC8B53;
color: #fff;
}
</style>
</head>
<body>
<p>
是啊啊啊
</p>
</body>
</html> Nachdem Sie es so eingestellt haben, ändert sich die Breite von p mit der Änderung der Bildschirmhöhe, seine Höhe ändert sich mit der Änderung der Bildschirmbreite und auch die Schriftgröße ändert sich mit dem Bildschirm. Ich habe dies getan, um die Flexibilität der VW-Einheit intuitiver auszudrücken. Schluss mit dem Schreiben einer Menge chaotischer @media-Sachen. Was ist eine flexible Methode? Wenn Sie beispielsweise die Breite eines p auf 50 % des Bildschirms festlegen, beträgt die Breite 50 vw. Zu diesem Zeitpunkt müssen Sie die Höhe auf 50 % der Breite einstellen. Was ist, wenn Sie vw nicht verwenden? Sie können zum Berechnen nur js verwenden. Aber wenn Sie VW verwenden, stellen Sie ihn einfach auf 25 VW ein und es ist in Ordnung.
Es gibt jedoch einige Kompatibilitätsprobleme mit iOS. Der mit einem Android-Telefon gelieferte Browser erfordert Android 4.4 oder höher, nur der mitgelieferte Browser hat Probleme. Aber wer nutzt jetzt noch den integrierten Browser von Android, um damit zu spielen? Der ist nirgendwo zu finden. Verwenden Sie also einfach vw und vh.