Beste Schriftgrößeneinstellungen für Mobilgeräte-HTML-Tutorial-php.cn

Beste Schriftgrößeneinstellungen für Mobilgeräte

PHPz

Freigeben： 2018-05-15 11:01:30

Original

17383 Leute haben es durchsucht

Hey, lass mich dir erklären, wie man einige mobile CSS-Einheiten verwendet. px ist definitiv nicht möglich, also wie viel @media sollte geschrieben werden. Es gibt zwei am häufigsten verwendete Einheiten:
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>

Nach dem Login kopieren

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; 
    }
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonBeste Schriftgrößeneinstellungen für Mobilgeräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!