Quelle est la différence entre px, em et rem en CSS ?

Différence : px représente les pixels, qui sont une unité de longueur relative. La taille de la police est définie par rapport à la résolution de l'écran du moniteur. Elle ne prend pas en charge la mise à l'échelle IE. son élément parent. La taille de la police prend en charge la mise à l'échelle IE ; rem est une unité de longueur relative et définit la taille de la police par rapport à l'élément racine HTML.

Tutoriel recommandé : Tutoriel vidéo CSS

PX, Les définitions de EM et REM

px représentent les pixels et ne changeront pas en raison des changements de taille d'autres éléments.

La taille du pixel va "changer", également connue sous le nom de "longueur relative". Plus le pixel est élevé, plus sa palette de couleurs est riche et plus la couleur peut être exprimée de manière réaliste.

em représente la taille de la police par rapport à l'élément parent. Em est une unité relative. Il n'y a pas de valeur de mesure fixe, mais une valeur relative déterminée par la taille des autres éléments.

em est une unité de longueur relative, relative à la taille de police du texte dans l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut. du navigateur. Il est davantage utilisé à l’étranger.

La hauteur de police par défaut de tout navigateur est de 16 px, et tous les navigateurs non ajustés sont conformes à : 1em=16px. Ensuite, 12px=0.75em; 10px=0.625em ; afin de simplifier la conversion de font-size, Font-size=62.5% doit être déclaré dans le sélecteur de corps en CSS, ce qui fait que la valeur em devient : 16px*62.5% =10px ; De cette façon, 12px=1.2em; 10px=1em, c'est-à-dire qu'il vous suffit de diviser votre valeur px d'origine par 10, puis de la modifier comme unité.

REM est une unité relative et est un élément racine HTML relatif. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche.

Caractéristiques des unités px, em et rem dans les feuilles de style CSS

Généralement, nous utilisons généralement px pour définir les polices. Par conséquent, le navigateur. La fonction d'amplification des polices ne peut pas être utilisée et la plupart des sites Web étrangers peuvent être utilisés sous IE. Cela est principalement dû à :

(1) IE ne peut pas ajuster la taille de la police qui utilise px comme unité ; (2). La raison pour laquelle la plupart des sites Web étrangers peuvent être ajustés est qu'ils utilisent em comme unité de police

(3). navigateur (ou noyau).

Alors, quelles sont les caractéristiques des unités CSS px, em et rem ?

1. Caractéristiques de px

PX est en fait un pixel Lorsque vous utilisez PX pour définir la taille de la police, il est plus stable et précis.

Mais il y a un problème avec cette méthode. Lorsque l'utilisateur parcourt la page Web que nous avons créée dans le navigateur, si le zoom du navigateur est modifié, la mise en page de notre page Web sera cassée, donc pour cela. est un gros problème pour les utilisateurs soucieux de la convivialité de leur site Web.

Il a donc été proposé d'utiliser "em" pour définir la police de la page Web.

2. Les caractéristiques de em

EM sont de mettre à l'échelle la taille de la police en fonction du benchmark EM est essentiellement une valeur relative plutôt qu'une valeur numérique spécifique. nécessite Un point de référence est généralement basé sur la "font-size" de

. Par exemple, le benchmark du thème officiel WordPress Twentytwelve est 14px=1em.

D'une manière générale, em a les caractéristiques suivantes :

(1), la valeur de em n'est pas fixe

(2), em héritera de l'élément parent Font ; taille.

Ainsi, lorsque nous écrivons du CSS, nous devons faire attention aux trois points suivants :

(1), déclarer Font-size=62.5% dans le sélecteur de corps

(2) Divisez votre valeur px d'origine par 10, puis remplacez-la par em comme unité

Si les deux étapes ci-dessus peuvent résoudre le problème, personne ne peut utiliser px. Après les deux étapes ci-dessus, vous constaterez que la taille de la police de votre site Web est étonnamment grande, car la valeur de em n'est pas fixe et héritera de la taille de l'élément parent. Vous pouvez définir la taille de la police sur 1,2em dans le contenu. div. C'est 12px.

Ensuite, vous définissez la taille de police du sélecteur p à 1,2em, mais si p appartient à l'enfant du contenu, la taille de police de p n'est pas 12px, mais 1.2em= 1.2 * 12px=14.4 px, ceci est dû au fait que la taille de la police du contenu est définie sur 1,2em. Cette valeur em hérite de la taille du corps de son élément parent, qui est 16px * 62,5% * 1,2=12px, et p est son enfant, et em hérite de la taille du contenu. La hauteur de la police est de 12 px, donc le 1,2em de p n'est plus 12 px, mais 14,4 px.

(3) Recalculez la valeur em de ces polices agrandies pour éviter une déclaration répétée de la taille de la police.

C'est pour éviter le phénomène de 1,2 * 1,2 = 1,44. Par exemple, si vous déclarez que la taille de police est de 1,2em dans #content, alors lorsque vous déclarez la taille de police de p, elle ne peut être que de 1em. , pas 1.2em , car ce em n'est pas celui-là, il hérite de la hauteur de police de #content et devient 1em=12px.

L'exception concerne les caractères chinois de 12 px, c'est-à-dire que les caractères chinois de 12 px (1,2 em) obtenus par la méthode ci-dessus ne sont pas égaux à la taille de police directement définie par 12 px dans IE, mais sont légèrement plus grands. Ce problème a été résolu. Changez simplement 62,5 % en 63 % dans le sélecteur de corps et il s'affichera normalement. La raison peut être que lorsque IE traite les caractères chinois, la précision des valeurs à virgule flottante est limitée. s'il existe d'autres explications et méthodes d'optimisation (pour une optimisation plus détaillée, veuillez consulter l'introduction correspondante sur le blog de Ma Haixiang "Regardez les détails CSS qui peuvent améliorer l'efficacité mais sont facilement négligés").

3. Caractéristiques de rem

rem est une nouvelle unité relative (root em, root em) en CSS3.

EM définit la taille de la police par rapport à son élément parent, il y aura donc un problème pour définir n'importe quel élément, vous devrez peut-être connaître la taille de son élément parent, tandis que Rem définit la taille de la police par rapport à l'élément parent. élément racine< ;html>, cela signifie qu'il suffit de déterminer une valeur de référence sur l'élément racine.

Actuellement, tous les navigateurs, à l'exception d'IE8 et des versions antérieures, prennent en charge rem.

Pour les navigateurs qui ne le supportent pas, la solution est très simple, qui consiste à écrire une déclaration d'unité absolue supplémentaire. Ces navigateurs ignorent les tailles de police définies avec rem.

Ce qui suit est un exemple :

p {font-size:14px; font-size:.875rem;}

La différence entre les unités px, em et rem dans les feuilles de style CSS

Habituellement, nous distinguons ensuite la différence entre px et em : px est une unité absolue et ne prend pas en charge la mise à l'échelle d'IE. em est une unité relative et prend en charge la mise à l'échelle d'IE. En fait, les différences entre les unités CSS em, px. et rem, en détail, sont les points suivants :

1. PX : Pixel

PX est une unité de longueur relative, qui est relative à la résolution de l'écran du moniteur.

Avantages et inconvénients : Il est relativement stable et précis, mais la page sera confuse lors du zoom ou du zoom dans le navigateur.

2. EM

EM : Il s'agit d'une unité de longueur relative utilisée pour concevoir la taille de la police par rapport à l'élément parent. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle est relative à la taille de police par défaut du navigateur.

Avantages et inconvénients : La valeur de EM n'est pas fixe, elle héritera de la taille de police de l'élément parent.

Conversion entre PX et EM :

La hauteur de police par défaut de tout navigateur est de 16 px. Tous les navigateurs non modifiés sont conformes à : 1em=16px. Ensuite, 12px=0,75em, 10px=0,625em.

Pour faciliter l'utilisation, lorsque nous utilisons em, nous déclarons généralement font-size=62,5% dans le sélecteur de corps en CSS (ce qui fait que la valeur em devient : 16px*62,5%=10px. Après cela, vous seul). Vous devez diviser la valeur px que vous utilisez par 10 pour obtenir la valeur em, par exemple : 12px=1,2em, 10px=1em.

3. REM

REM est une nouvelle unité relative en CSS3 REM est une unité relative et un élément racine HTML relatif.

On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne de la composition des tailles de police. couche par couche.

Actuellement, tous les navigateurs, à l'exception d'IE8 et des versions antérieures, prennent en charge rem.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!