Maison >interface Web >tutoriel CSS >Explication détaillée de l'utilisation des unités REM dans CSS3 (exemple de code)
Explication détaillée de l'utilisation des unités REM dans CSS3 (exemple de code)
- 不言original
- 2018-11-07 10:50:134979parcourir
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;}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;}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;}Ce que fait REM, prend 20REM et le multiplie avec l'élément racine :
20 REM * 1 PX = 20PX.
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;}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>L'effet est le suivant :
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;}Si vous souhaitez réduire la taille de la police de 20 %, vous devez faire ceci :
html{font-size:0.8px;}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;
}}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);
}Le CSS compilé ressemblera à ceci :
article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}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!