Compréhension approfondie des unités de police CSS px, em, rem et %-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Compréhension approfondie des unités de police CSS px, em, rem et %

Sep 19, 2018 pm 02:23 PM

css

Lorsque nous mettons en page la page, nous choisissons généralement d'utiliser px comme unité de longueur. De nombreuses personnes ne seront pas familières avec em, rem et autres unités de longueur. Ensuite, laissez-moi vous parler des unités de police CSS px, em, rem et pourcentage. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

Il existe de nombreux types d'unités de police CSS. Nous introduisons uniquement %, px, em et rem

1 Pourcentage
2. Unité de longueur relative. Les pixels px sont relatifs à la résolution de l'écran d'affichage.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .div1{
               font-size: 20px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;div1&quot;&gt;
            字体为20px
       &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

2. Em est une unité relative de longueur. Par rapport à la taille de la police dans le texte de l'objet. Si la taille de police du texte en ligne actuel n'est pas définie manuellement, elle équivaut à la taille de police par défaut du navigateur.

La taille de police par défaut de tout navigateur est de 16 pixels. Toutes les tailles de police de navigateur non ajustées sont conformes à : 1em = 16px. Afin de simplifier la conversion de la taille de la police, vous devez déclarer Font-size=62,5% dans le sélecteur de corps en CSS, ce qui fait que la valeur em devient 16px*62,5%=10px, donc 12px=1.2em, 10px=1em , c'est-à-dire également qu'il vous suffit de diviser votre valeur px d'origine par 10, puis de la remplacer par em comme unité. Caractéristiques de

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style&gt;
            body{
                /*相对于浏览器的字体大小16px定义，此时浏览器的字体大小为10px，便于以后计算*/
                font-size: 62.5%;
            }
            .div1{
                font-size: 2em;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;div1&quot;&gt;
            字体2em相当于20px
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

1.em La valeur n'est pas fixe.
La valeur de 2.em héritera de la taille de police du parent.
3.rem est une nouvelle unité relative (root em) introduite par CSS3. Rem est toujours une taille relative, mais la valeur est relative au HTML. Grâce à lui, vous pouvez ajuster la taille de toutes les polices proportionnellement en modifiant l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style&gt;
             .div1{
                 /*相对于HTMl字体*/
                 font-size: 2rem;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;div1&quot;&gt;
            字体2rem相当于32px
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Merci !

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn