Comment utiliser rem en CSS3

rem est une valeur de taille relative, relative à l'unité de taille de la police de l'élément HTML, et le format de syntaxe est "élément : nombre + rem". rem modifie la taille de la police du navigateur, ce qui perturbera la mise en page de notre page Web.

Cette opération tutoriel Environnement : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

CSS3 a ajouté une nouvelle unité relative rem. L'utilisation de rem est la même que celle d'em comme unité relative de taille de police, par rapport à l'unité de la taille de police de l'élément racine. plus crûment, c'est relatif à l'unité de taille de la police de l'élément HTML.

Avantages : lors du calcul de la taille des sous-éléments, il vous suffit de la calculer en fonction de la taille de la police de l'élément html. Ce n'est plus comme lors de l'utilisation d'em, il faut faire des allers-retours pour trouver la taille de police de l'élément parent pour des calculs fréquents, et on ne peut pas du tout se passer d'une calculatrice.

rem est l'unité

Avec l'émergence de CSS3, il a également introduit de nouvelles unités, dont ce que nous appelons aujourd'hui rem. Rem est décrit sur le site officiel du W3C comme ceci - "taille de police de l'élément racine". Regardons de plus près Rem.

rem est relatif à l'élément racine , ce qui signifie qu'il suffit de déterminer une valeur de référence dans l'élément racine et de définir la taille de la police dans l'élément racine. Cela peut être entièrement basé sur. le vôtre Si nécessaire, vous pouvez également vous référer à l'image ci-dessous :

Regardons un exemple simple :

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

Je l'ai défini dans l'élément racine Une taille de police de base est de 62,5 % (soit 10 px. La définition de cette valeur sert principalement à faciliter le calcul. Si elle n'est pas définie, elle sera basée sur « 16 px »). À partir des résultats de calcul ci-dessus, nous pouvons utiliser « rem » aussi facilement que « px », et en même temps résoudre la différence entre « px » et « em ».

Utilisation de rem

Nous devons d'abord ajouter cette balise :

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

La signification spécifique est la suivante :

échelle initiale - mise à l'échelle initiale Proportionminimum-scale - la proportion minimale sur laquelle l'utilisateur est autorisé à zoomer à l'échelle maximale - la proportion maximale sur laquelle l'utilisateur est autorisé à zoomer

Ensuite, définissez la taille de la police du code HTML :

// resize 窗口大小发生改变的时候才会触发的，第一次加载时不会触发
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    // 手机屏幕是否反转orientationchange
    window.addEventListener(resizeEvt, setFontSize, false); // IE 谷歌
document.addEventListener('DOMContentLoaded', setFontSize, false); //火狐
function setFontSize() {
    var cWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var basicNum = 200;
    var htmlFontSize = basicNum * (cWidth / 设计稿宽度);
    document.documentElement.style.fontSize = htmlFontSize + 'px';
}

Brouillon de conception générale La largeur est de 750. Pendant le processus de développement, nous avons utilisé l'iPhone 6/7/8 comme référence. Ensuite, la taille de police du HTML doit être de 200*(375/750). =100px ; donc s'il y a une largeur de 200px dans la zone de brouillon de conception. Nous devons définir sa largeur sur (200/100)rem ; c'est pourquoi je recommande de définir basicNum sur 200, car c'est simple à calculer.

var htmlFontSize=basicNum*(cWidth/设计稿宽度);

On peut voir que plus la taille de l'écran est large, plus la taille de la police du code HTML racine est grande. Puisque d'autres éléments sont

basés sur celui-ci, ils peuvent être adaptatifs.

Compatibilité des navigateurs

rem est une nouvelle unité de mesure introduite par CSS3. Tout le monde se sentira certainement frustré et inquiet à propos de la prise en charge des navigateurs. En fait, il n'y a pas lieu d'avoir peur. Vous pourriez être surpris qu'il existe de nombreux navigateurs pris en charge, tels que : Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ et Opera11+.

Cependant, lorsque vous utilisez des unités pour définir les polices, vous ne pouvez pas ignorer complètement IE. Si vous souhaitez utiliser ce REM, mais souhaitez également être compatible avec l'effet sous IE, vous pouvez envisager d'utiliser "px" et. "rem" ensemble, utilisez "px" pour obtenir l'effet sous IE6-8, puis utilisez "Rem" pour obtenir l'effet du navigateur.

Apprentissage recommandé : tutoriel vidéo 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!