Explication détaillée de l'utilisation des unités REM dans CSS3 (exemple de code)-tutoriel CSS-php.cn

Explication détaillée de l'utilisation des unités REM dans CSS3 (exemple de code)

不言

Libérer： 2018-11-07 10:50:13

original

4885 Les gens l'ont consulté

De nombreux sites Web utilisent des unités de pixels difficiles à ajuster sur de plus en plus d'appareils différents. CSS3 introduit de nouvelles unités, notamment les unités REM, qui signifie « root em ». REM.

Alors, comment utilise-t-on le REM ?

Supposons que nous ayons ce CSS :

CSS

article h2 {font-size:20px;}
article p {font-size:12px;}

Copier après la connexion

Tout d'abord, nous devons déterminer la taille en px par rapport à toutes les polices. Pour plus de commodité, la meilleure chose que j'ai faite a été de créer une taille de police racine de 1 px comme ceci :

CSS

html {font-size:1px;}

Copier après la connexion

Deuxièmement, nous devons changer le reste de la police. taille Les valeurs sont remplacées des pixels par des unités rem.

CSS

article h2 {font-size:20rem;}
article p {font-size:12rem;}

Copier après la connexion

Ce que fait REM, prend 20REM et le multiplie avec l'élément racine :

20 REM  *  1 PX = 20PX.

Copier après la connexion

Prise en charge du navigateur

IE7 et IE8 doivent toujours utiliser les valeurs PX. Cela nous obligera à écrire la taille de la police deux fois, une fois en PX et une seconde fois en REM.

CSS

article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}

Copier après la connexion

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
html{font-size:1px;}
article h2{
  font-size:20px;/*Support IE7 & IE8*/
  font-size:20rem;
}
article p{
  font-size:12px;/*Support IE7 & IE8*/  
  font-size:12rem;
}
</style>
</head>
<body>
<section>
  <article>
    <h2>php中文网</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h2>php中文网1</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h2>php中文网2</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>  
</section>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Explication détaillée de lutilisation des unités REM dans CSS3 (exemple de code)

Quels sont les avantages du REM ?

Supposons que nous devions agrandir toutes les polices du site Web de 20 %, tout ce que nous avons à faire est de changer la taille de la police dans l'élément racine comme ceci :

html {font-size:1.2px;}

Copier après la connexion

Si vous souhaitez réduire la taille de la police de 20 %, vous devez faire ceci :

html{font-size:0.8px;}

Copier après la connexion

REM pour un design réactif

Si vous souhaitez réduisez la taille de la police en fonction du réactif. Il est plus facile de modifier toutes les tailles de police avec des points d'arrêt dans la conception. Voir exemple :

@media (min-width: 320px){
    html{
        font-size:1.4px;
    }}
@media (min-width: 600px){
    html{
        font-size:1.2px;
    }}

Copier après la connexion

Désormais, sur des écrans plus petits, nous pouvons redimensionner toutes les polices 40 % plus grandes, et sur des écrans moyens, nous les redimensionnons de 20 %.

Utilisez less pour résoudre le besoin d'écrire du contenu deux fois - pour prendre en charge les anciens navigateurs

Dans less ou sass, vous pouvez ajouter des fonctions pour vous éviter d'écrire deux fois tout le temps .

Vous pouvez utiliser la fonction less-font-size et l'appeler

.font-size(@font-size) {    
  font-size : @font-size * 1px;
  font-size : @font-size * 1rem;
  }
  article h2 {
  .font-size(20);
  }

Copier après la connexion

Le CSS compilé ressemblera à ceci :

article h2{
  font-size:20px;
  /*Support IE7 & IE8*/
  font-size:20rem;
  }

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée de l'utilisation des unités REM dans CSS3 (exemple de code)