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

1. Pour développer le terminal mobile, la configuration de la tête nécessaire

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

font-size 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. Certains styles par défaut des pages de développement mobile
interdisent un arrière-plan d'étiquette

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

interdisent un appui long sur a, La balise img apparaît dans la barre de menu

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

6. Interception d'une seule ligne

7. Utilisation de calc, quelle que soit la version basse (ie11 ci-dessous et Android 56 ci-dessous , tous les opéras) compatibilité sexe, utilisation recommandée, 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 ; le modèle standard de valeur par défaut, la largeur et la hauteur n'incluent pas la marge intérieure et la marge extérieure de la bordure
padding-box ; la largeur et la hauteur incluent la marge intérieure et n'incluent pas la marge intérieure et la hauteur. ne pas inclure la bordure et la marge extérieure
border-box ; la largeur et la hauteur du modèle étrange incluent les marges intérieures et les bordures, pas les marges extérieures.

9. Centrage horizontal et vertical (couramment utilisé sur les terminaux mobiles)
Inconvénients : nécessité de connaître la largeur et la hauteur du petit conteneur
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. 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, c'est-à-dire plusieurs paramètres 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-le pour éliminer les bugs
whitespace spacing = lineHeight - fontSize
Définissez la hauteur de ligne de l'élément parent à 100 % pour ne laisser aucun espace blanc

11.vertical- alignAjuster 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 la ligne de base de l'indice parent
super : la ligne de base de l'élément est alignée avec la ligne de base en exposant de l'élément parent
top : 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 la ligne entière Alignement du bas
text-bottom : Le bas de l'élément est aligné avec le bas de la police de l'élément parent
pourcentage : Le 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!