Inhaltszusammenfassung im Zusammenhang mit mobilem H5-Entwicklungs-CSS

1. Mobiles Endgerät entwickeln, notwendige Kopfkonfiguration
viewport" content="width=device-width,initial-scale= 1, user-scalable=no"> (Die Werte jedes Attributs werden nicht eingeführt. Während der Entwicklung hat Xiaomi (2016 Xiaomi 4) user-scalable=no und es getestet hat nicht funktioniert. )
2.rem wird verwendet, um die Schriftgröße des Wurzelknotens festzulegen, die während des Entwicklungsprozesses mit Js berechnet wird.
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. Zum Beispiel
{
max-width:640px;
min-width:320px;
}
5. Einige Standardwerte für die mobile Entwicklung Seitenstil
Beschriftungshintergrund deaktivieren
a,button,input,optgroup,select,textare{
// Den blauen Außenrand und die graue Transparenz entfernen, wenn auf einen,input,button geklickt wird
-webkit - tap-highlight-color:rgba(0,0,0,0);
}
Es ist verboten, lange auf a zu drücken,img tagDie Menüleiste erscheint
a, img{
// Langes Drücken deaktivieren, um die Menüleiste anzuzeigen
-webkit-touch-callout:none;
}
Reibungsloses Scrollen
body{
-webkit-overflow-scrolling:touch;
}

6. Informationen zum Abfangen einzelner Zeilen finden Sie unter http://www.cnblogs.com/victory820/p/6728904 .html

7. Die Verwendung von calc berücksichtigt nicht die Kompatibilität niedrigerer Versionen (z. B. 11 unten, Android 56 unten, Opera alle), es wird empfohlen, es zu verwenden, und es ist praktisch.

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: Standardmodell, Breite und Höhe enthalten keine Ränder innere Ränder äußere Ränder
padding-box;width und height schließen Polsterung ein und schließen Rand und Rand aus
border-box;seltsame Modellbreite und -höhe schließen Polsterung und Rand ein, schließen keine Ränder ein .

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

< ;p class="child">

.parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
// Beachten Sie, dass alle vier Richtungen 0
.child{ position:absolute;

margin:auto;
top:0;
right;0;
unten: 0;
links: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 ist, mehrere
Längeneinstellung Fester Zeilenabstand
% Zeilenabstand basierend auf dem Prozentsatz der aktuellen Schriftgröße
vom übergeordneten Element geerbt
Merken Sie sich die folgende Formel und verwenden Sie sie es, um Fehler zu beseitigen
Leerzeichenabstand = lineHeight - FontSize
Setzen Sie die Zeilenhöhe des übergeordneten Elements auf 100 %, um Leerzeichen zu entfernen

11.vertikal ausrichtenVertikale Zentrierung des Symbols anpassen (häufig auf mobilen Endgeräten verwendet)
Grundlinie: Der Inhalt wird an der Grundlinie des übergeordneten Elements ausgerichtet.
Unter: Die Grundlinie des Elements wird am übergeordneten Element ausgerichtet tiefgestellte Grundlinie des Elements
super: Die Grundlinie des Elements ist an der hochgestellten Grundlinie des übergeordneten Elements ausgerichtet
oben: Der obere Teil des Elements und seine Nachkommen sind am oberen Rand der gesamten Zeile ausgerichtet
text-top: Die Oberseite des Elements ist an der Oberseite der Schriftart des übergeordneten Elements ausgerichtet.
middel: Die Mittellinie des Elements ist an der Grundlinie des übergeordneten Elements ausgerichtet.
bottom: Die Unterseite des Elements und seine Nachkommen werden am unteren Rand der gesamten Zeile ausgerichtet
text-bottom: Der untere Rand des Elements wird am unteren Rand der Schriftart des übergeordneten Elements ausgerichtet
Prozentsatz: 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-Eigenschaften ausgelöst werden

Das obige ist der detaillierte Inhalt vonInhaltszusammenfassung im Zusammenhang mit mobilem H5-Entwicklungs-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!