Zusammenfassung der Inhalte im Zusammenhang mit der mobilen H5-Entwicklung

1. Zur Entwicklung des mobilen Endgeräts wird während des Entwicklungsprozesses die erforderliche Kopfkonfiguration

<meta name="
viewport
" content="
width
=device-width,initial-scale=1,user-
scala
ble=no">（各
属性
值不在介绍，在开发中小米（2016年小米4）测试user-scalable=no是不起作用的）

Schriftgröße mithilfe von Js berechnet.
Formel 320/100 = Bildschirmgröße/FontSize-Wert
3. Klicken Sie zum Springen, die semantische Bezeichnung ist ein (dispaly: block;)
Im Falle einer semantischen Betrachtung, a Fügen Sie dem Tag einen Span (disply:block) und einen Container
hinzu. 4. Legen Sie für eine benutzerfreundliche Erfahrung die maximale Breite und die minimale Breite fest, wenn Sie mobile Seiten entwickeln. Wie zum Beispiel

{
 
max-width
:640px;
 
min-width
:320px;
}

5. Einige Standardstile von mobilen Entwicklungsseiten
verbieten einen Beschriftungshintergrund

a,button,input,optgroup,select,textare{
 // 去掉a,input,button点击时蓝色外边框和灰色半透明
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

verbieten langes Drücken von a, img-Tag erscheint in der Menüleiste

a,img{
 // 禁止长按显示菜单栏
 -webkit-touch-c
all
out:none;
}
流畅滚动
body{
 -webkit-
overflow
-scrolling:touch;
}

6. Einzeiliges Abfangen

7. Verwendung von Calc, unabhängig von der niedrigen Version (z. B. 11 unten und Android 56 unten). , alle Oper) Kompatibilität Sex, empfohlen zu verwenden, bequem.

8. Die Verwendung der Box-Größe behebt die Inkonsistenz bei der Anzeige von Box-Modellen in verschiedenen Browsern. (Wird häufig auf mobilen Endgeräten verwendet)
Inhaltsfeld; Standardwert: Breite und Höhe umfassen nicht den Innenrand und den Außenrand des Rahmens.
Auffüllfeld: Breite und Höhe schließen den Innenrand ein Rand und Außenrand nicht einschließen
border-box; seltsame Modellbreite und -höhe umfassen Innenränder und Ränder, nicht Außenränder.

9. Horizontale und vertikale Zentrierung (häufig auf mobilen Endgeräten verwendet)
Nachteile: Breite und Höhe des kleinen Containers müssen bekannt sein
Format

<p class="parent">
 <p class="child"></p>
</p>
.parent{
 
position
:relative;
 width:100px;
 height:100px;
 
background-color
:red;
}
// 注意是四个方向都是0
.child{
 position:absolute;
 
margin
:auto;
 
top
:0;
 
right
;0;
 
bottom
:0;
 
left
:0;
 width:50px;
 height:50px;
 background-color:gold;
}

10.ZeilenhöheEinstellungen (häufig auf mobilen Endgeräten verwendet)
normal: Standardmäßig wird automatisch ein angemessener Zeilenabstand zugewiesen
Zahleneinstellungsnummer, die durch Multiplikation der aktuellen Schriftgröße festgelegt wird, Das heißt, mehrere
Längeneinstellungen Fester Zeilenabstand
% Zeilenabstand basierend auf dem Prozentsatz der aktuellen Schriftgröße
Vom übergeordneten Element geerbt
Merken Sie sich die folgende Formel und Verwenden Sie es, um Fehler zu beseitigen.
Leerraumabstand = Zeilenhöhe - Schriftgröße
Setzen Sie die Zeilenhöhe des übergeordneten Elements auf 100 %, um keinen Leerraum zu hinterlassen.

11.vertikal- ausrichtenPassen Sie die vertikale Zentrierung des Symbols an (wird häufig auf mobilen Endgeräten verwendet)
Grundlinie: Der Inhalt wird an der Grundlinie des übergeordneten Elements ausgerichtet
Sub: Die Grundlinie des Elements wird an der tiefgestellten Grundlinie des übergeordneten Elements ausgerichtet
super: Die Grundlinie des Elements ist an der hochgestellten Grundlinie des übergeordneten Elements ausgerichtet
top: Das Element und seine Oberkante der Nachkommen ist an der Oberkante der gesamten Zeile ausgerichtet
text-top: Die Oberseite des Elements wird an der Oberseite der Schriftart des übergeordneten Elements ausgerichtet.
Mitte: Die Mittellinie des Elements wird an der Grundlinie des übergeordneten Elements ausgerichtet.
unten: Die Unterseite des Elements und seiner Nachkommen werden ausgerichtet mit der gesamten Zeile. Untere Ausrichtung
text-bottom: Der untere Rand des Elements wird am unteren Rand der Schriftart des übergeordneten Elements ausgerichtet.
percentage: Der Prozentsatz gibt den Versatz an. Basislinie ist 0 %
Länge: numerische Methode, Basislinie ist 0 (häufig verwendet)

12. Verwendung von Flex
Wenn die beiden Spalten nicht gleichmäßig verteilt sind, versuchen Sie, die Breite festzulegen auf 0
https://csstriggers.com/ Überprüfen Sie, welche Prozesse durch CSS-Attribute ausgelöst werden

Das obige ist der detaillierte Inhalt vonZusammenfassung der Inhalte im Zusammenhang mit der mobilen H5-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!