Maison > Article > interface Web > Compréhension approfondie de rem en CSS et des méthodes de mise en page sur les terminaux mobiles

Compréhension approfondie de rem en CSS et des méthodes de mise en page sur les terminaux mobiles

yuliaoriginal: 2018-09-17 16:15:081519parcourir

Je crois que tout le monde connaît déjà le px, mais quand il s'agit de rem, certaines personnes ne le connaissent pas. L'article d'aujourd'hui présente principalement ce que sont rem et em, ainsi que leurs méthodes de mise en page dans les terminaux mobiles. Vous pouvez vous y référer si nécessaire. J'espère que cela vous sera utile.

1. Qu'est-ce que le rem ?

rem est un attribut d'unité nouvellement ajouté (taille de police de l'élément racine) dans CSS3, qui est une unité convertie en fonction de la taille de police du nœud racine de la page. racine! ! ! ! ! ! ! ! ! Le nœud racine, qui est HTML.

Exemple : (Le nœud racine dans l'exemple ci-dessous est HTML et sa taille de police est de 100 px, donc le rem défini pour les éléments situés sous le nœud racine est 1rem=100px.)
La valeur initiale de rem C'est 16px, ce qui signifie que lorsque la taille de police du nœud racine n'est pas définie, 1rem=16px

<html>
    <head>
        <style>
            html,body{ font-size: 100px;  }
            header{ height: 1rem;width: 1rem;  }  
        </style>
    </head>
    <body></body>
    <header></header>
</html>

2. Qu'est-ce que em

em est également des unités relatives, les unités em sont des unités qui sont converties en fonction de la taille de police de l'élément parent.
1. La valeur de em n'est pas fixe ;
2. em héritera de la taille de police de l'élément parent.

Nœud parent
Exemple :

<header style="font-size:100px;">//父元素的字体大小是100px
    <div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>

3. Compétences en matière de développement de pages mobiles :

Enquêter d'abord sur l'utilisation de l'utilisateur et résumer Découvrez quels appareils la plupart des utilisateurs utilisent.
Par exemple : la plupart de mes utilisateurs actuels utilisent trois types de téléphones mobiles. Nous découvrons d'abord la résolution de chaque téléphone mobile sur Internet.

Listez-les tous, puis rédigez une requête multimédia (car différents téléphones mobiles ont des résolutions différentes, donc si vous utilisez des pixels, l'affichage sera le même, par exemple ~ Par exemple, si les enfants mangent, le étiquettes de cantine pour enfants Il est livré avec un petit pain cuit à la vapeur, mais certains enfants mangent beaucoup, et d'autres en mangent une petite quantité, donc ils peuvent ne pas manger assez ou ne pas pouvoir manger, ce qui provoque du gaspillage. La dame de la cafétéria a donc eu une idée. . Les petits amis peuvent recevoir un petit pain cuit à la vapeur, un demi-pain cuit à la vapeur pesant moins de 50 livres et deux petits pains cuits à la vapeur pesant plus de 60 livres.)

Mes groupes d'utilisateurs sont probablement ces trois-là. . Appareil
Résolution du nom de l'appareil estimation de la taille de la police rem en px conversion
iphone5 320568 taille de la police : 12px ; 1rem=12px
iphone6 375667 taille de la police : 14px ; Plus 414* 736 taille de police : 16px ; 1rem=16px

Retirez d'abord un périphérique intermédiaire pour effectuer une écriture de style de base

La première écriture peut être une écriture px selon le dessin de conception (c'est-à-dire sélectionnez-le d'abord La taille des petits pains cuits à la vapeur)
Donner la priorité à l'écriture d'un ensemble de modèles, puis écrire des requêtes multimédias pour d'autres appareils en fonction de cet ensemble de modèles

Donner la priorité à l'écriture de balises de requête multimédia sur la page

<meta name="viewport" content="width=device-width,      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,    user-scalable=no">

largeur - la largeur du périphérique de la fenêtre d'affichage

hauteur - la hauteur du périphérique de la fenêtre d'affichage
échelle initiale - le rapport de mise à l'échelle initial
échelle minimale - l'échelle minimale autorisée à l'utilisateur pour zoomer sur
échelle maximale - autorisé Le rapport maximum sur lequel l'utilisateur peut zoomer
évolutif pour l'utilisateur - si l'utilisateur peut zoomer manuellement

Attribué ci-dessus, écrivez la requête multimédia de cette façon

html,body{ height: 100% ; margin: 0; padding: 0; font-size: 14px;}//Notez que le style initial doit être écrit en haut ! ! ! ! Si elle est écrite au bas de la requête multimédia, elle écrasera la requête multimédia ci-dessus (car il s'agit d'une feuille de style en cascade ~)

@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

Parce qu'un ensemble de modèles initiaux est écrit ci-dessus, car les modèles initiaux sont tous des px. Au début de l'article, nous avons souligné pourquoi px ne peut pas être utilisé, nous devons donc convertir les px de la page en la valeur rem correspondante

Exemple :

header{
    width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}

Toutes les hauteurs en utilisant px Changez toute la largeur en rem et vous avez terminé, en vous adaptant aux trois appareils.

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!

css css3 html 继承样式表 margin padding viewport

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser du CSS pur pour réaliser une animation abstraite de l'eau ondulante (code source ci-joint)Article suivant：Comment utiliser du CSS pur pour réaliser une animation abstraite de l'eau ondulante (code source ci-joint)

Articles Liés

Voir plus