Résumé du contenu lié au développement CSS mobile h5

1. Développer le terminal mobile, configuration de tête nécessaire
viewport" content="width=device-width,initial-scale= 1, user-scalable=no"> (Les valeurs de chaque attribut ne sont pas introduites. Pendant le développement, Xiaomi (2016 Xiaomi 4) a testé user-scalable=no et il n'a pas fonctionné. )
2.rem est utilisé pour définir la font-size du nœud racine, qui est calculée à l'aide de Js pendant le processus de développement.
Formule 320/100 = taille d'écran/valeur fontSize
3. Cliquez pour sauter, l'étiquette sémantique est un (affichage : bloc;)
Dans le cas d'une considération Sémantique , un Ajoutez une étendue (disply:block) à la balise et ajoutez un conteneur
à l'étendue 4. Pour une expérience conviviale, définissez la largeur maximale et la largeur minimale lors du développement de pages mobiles. Tels que
{
max-width:640px;
min-width:320px;
>
5. Style de pages
Désactiver l'arrière-plan d'une étiquette
a,button,input,optgroup,select,textare{
// Supprime la bordure extérieure bleue et la translucidité grise lorsqu'un,input,button est cliqué
-webkit - tap-highlight-color:rgba(0,0,0,0);
}
Il est interdit d'appuyer longuement sur a,balise imgLa barre de menu apparaît
a, img{
// Désactiver l'appui long pour afficher la barre de menu
-webkit-touch-callout:none;
}
Défilement fluide
body{
-webkit-overflow-scrolling:touch;
}

6 Pour l'interception d'une seule ligne, reportez-vous à http://www.cnblogs.com/victory820/p/6728904. .html

7. L'utilisation de calc ne prend pas en compte la compatibilité des versions inférieures (ie11 ci-dessous, Android 56 ci-dessous, Opera all), il est recommandé de l'utiliser, et c'est pratique.

8. L'utilisation du box-sizing résout l'incohérence dans l'affichage des modèles de boîtes dans différents navigateurs. (Couramment utilisé sur les terminaux mobiles)
content-box ; valeur par défaut, le modèle standard, la largeur et la hauteur n'incluent pas les bordures marges intérieures marges extérieures
padding-box;la largeur et la hauteur incluent le rembourrage et excluent la bordure et la marge
border-box;la largeur et la hauteur du modèle étrange incluent le rembourrage et la bordure, n'incluent pas les marges .

9. Centrage horizontal et vertical (couramment utilisé sur les terminaux mobiles)
Inconvénient : nécessité de connaître la largeur et la hauteur du petit conteneur
Format

< ;p class="enfant">

.parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
// Notez que les quatre directions sont 0
.child{
position:absolu;
marge:auto;
haut:0;
droite;0;
bottom: 0;
gauche:0;
width:50px;
height:50px;
background-color:gold;
}
10. Paramètres de hauteur de ligne (couramment utilisés sur les terminaux mobiles)
normal : par défaut, attribue automatiquement un espacement de ligne raisonnable
numéro de paramètre numérique, qui sera défini en multipliant la taille de police actuelle, qui est, plusieurs
paramètre de longueur Espacement des lignes fixe
% Espacement des lignes basé sur le pourcentage de la taille de police actuelle
hérité de l'élément parent
Rappelez-vous la formule suivante et utilisez pour éliminer les bugs
whitespace spacing = lineHeight - fontSize
Définissez la hauteur de ligne de l'élément parent à 100 % pour éliminer tout espace vide

11.alignement verticalAjuster le centrage vertical de l'icône (couramment utilisé sur les terminaux mobiles)
baseline : le contenu est aligné avec la ligne de base de l'élément parent
sub : la ligne de base de l'élément est alignée avec le parent element subscript baseline
super : La ligne de base de l'élément est alignée avec la ligne de base de l'exposant de l'élément parent
top : Le haut de l'élément et ses descendants sont alignés avec le haut de la ligne entière
text-top : le haut de l'élément est aligné avec le haut de la police de l'élément parent
middel : la ligne centrale de l'élément est alignée avec la ligne de base de l'élément parent
bottom : le bas de l'élément et ses descendants sont alignés avec le bas de la ligne entière
text-bottom : Le bas de l'élément est aligné avec le bas de la police de l'élément parent
Pourcentage : Pourcentage spécifie le décalage. La ligne de base est 0%
longueur : méthode numérique, la ligne de base est 0 (couramment utilisée)

12 Utilisation de flex
Lors de l'utilisation de flex, si les deux colonnes ne sont pas uniformément réparties, essayez de définir. la largeur à 0
https://csstriggers.com/ Vérifiez quels processus sont déclenchés par les attributs CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!