Partage de cas d'utilisation de l'unité relative REM

Cette fois je vais partager avec vous les cas d'utilisation des unités relatives REM Quelles sont les précautions d'utilisation des unités relatives REM Ce qui suit est un cas pratique, jetons un coup d'oeil.

rem (taille de police de l'élément racine) fait référence à l'unité de taille de police par rapport à l'élément racine. En termes simples, c'est une unité relative. Lorsque vous voyez rem, vous penserez certainement à l'unité em. Em (taille de police de l'élément) fait référence à l'unité de taille de police par rapport à l'élément parent. Elles sont en réalité très similaires, sauf qu'une règle de calcul s'appuie sur l'élément racine et l'autre s'appuie sur l'élément parent pour le calcul.

Comme mentionné ci-dessus, rem est adapté via l'élément racine L'élément racine de la page Web fait référence au htmlNous définissons la taille de la police du html. Vous pouvez contrôler la taille du rem , par exemple.

<span style="font-size: 14px;">html{<br>    font-size:20px;<br>}<br>.btn {<br>    width: 6rem;<br>    height: 3rem;<br>    line-height: 3rem;<br>    font-size: 1.2rem;<br>    display: inline-block;<br>    background: #06c;<br>    color: #fff;<br>    border-radius: .5rem;<br>    text-decoration: none;<br>    text-align: center;    <br>}</span>

Nous contrôlons la taille de la police de notre élément dom en modifiant la taille de font-size en HTML.

Afin de s'adapter à la compatibilité des différentes résolutions, la taille de la police en HTML peut être générée dynamiquement via js. Nous pouvons également la définir via une requête multimédia pour les modèles grand public. Par exemple, voici le code ci-dessous. Si vous ne savez pas grand-chose sur les requêtes multimédias, vous pouvez apprendre http://www.w3cplus.com/content/css3-media-queries

<span style="font-size: 14px;">html{font-size: 20px;}<br>@media only screen and (min-width: 320px){<br>    html{font-size: 20px !important;}<br>}<br>@media only screen and (min-width: 350px){<br>    html{font-size: 22.5px !important;}<br>}<br>@media only screen and (min-width: 365px){<br>    html{font-size: 23px !important;}<br>}<br>@media only screen and (min-width: 375px){<br>    html{font-size: 23.5px !important;}<br>}<br>@media only screen and (min-width: 390px){<br>    html{font-size: 24.5px !important;}<br>}<br>@media only screen and (min-width: 400px){<br>    html{font-size: 25px !important;}<br>}<br>@media only screen and (min-width: 428px){<br>    html{font-size: 26.8px !important;}<br>}<br>@media only screen and (min-width: 432px){<br>    html{font-size: 27.4px !important;}<br>}<br>@media only screen and (min-width: 481px){<br>    html{font-size: 30px !important;}<br>}<br>@media only screen and (min-width: 569px){<br>    html{font-size: 35px !important;}<br>}<br>@media only screen and (min-width: 641px){<br>    html{font-size: 40px !important;}<br>}</span>

<.>

Bien sûr, définissez le html Lorsque font-size in , nous pouvons également voir cette méthode d'écriture, html { font-size: 62.5% }. C'est principalement pour faciliter la conversion entre em et px. La valeur initiale de em est 1em=16px Évidemment, si c'est le cas, par exemple 1.2em = 19.2px, mais on voit rarement la taille représentée par. 19,2px lors de la définition, c'est-à-dire que lorsque vous utilisez px pour exprimer la taille, la valeur n'a pas de décimales. Lorsque body{font-size: est défini 62,5%;}, 1em = 16px*62,5% = 10px, 1,2em = 12px, n'est-ce pas beaucoup plus simple et plus précis~~.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres informations connexes. articles sur le site php chinois !

Lecture recommandée :

Résumé de l'organisation du code couramment utilisé

Cas d'utilisation de H5+Canvas Explication détaillée

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!