Qu'est-ce que rem en CSS

Le rem de CSS est une unité CSS. Le nom anglais complet de rem est "font size of the root element", qui fait référence à l'unité de taille de police par rapport à l'élément racine et em fait référence à l'élément racine. unité de taille de police par rapport à l’élément parent.

L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3.

Recommandé : "tutoriel vidéo CSS"

rem est une unité CSS discrète qui a commencé à augmenter au cours des deux dernières années. ont commenté rem Différent, certains essaient de l'utiliser, et certains l'ont abandonné après avoir rencontré des pièges lors de son utilisation. Mais mon évaluation globale de rem est qu’il s’agit certainement de l’un des candidats les plus appropriés pour créer des applications Web.

Qu'est-ce que le rem ?

rem (taille de police de l'élément racine) fait référence à l'unité de taille de police par rapport à l'élément racine. En termes simples, c'est une unité relative. Lorsque vous voyez rem, vous penserez certainement à l'unité em. Em (taille de police de l'élément) fait référence à l'unité de taille de police par rapport à l'élément parent. Elles sont en réalité très similaires, sauf qu'une règle de calcul s'appuie sur l'élément racine et l'autre s'appuie sur l'élément parent pour le calcul.

Pourquoi les applications Web utilisent-elles rem ?

Ici, j'insiste particulièrement sur le fait que les applications Web et les pages Web ne peuvent pas utiliser rem. En fait, bien sûr, vous le pouvez, mais pour des raisons de compatibilité, son utilisation sous des applications Web peut mieux mettre en valeur la valeur et les capacités de cette unité. Jetons un coup d'œil à la façon dont certaines applications Web d'entreprise actuelles mettent en œuvre l'adaptation à l'écran.

1. Obtenez une mise en page d'adaptation d'écran puissante :

Récemment, l'iPhone 6 ​​est sorti en deux tailles, ce qui a conduit à encore plus de confusion dans les types d'écrans mobiles. travailler il y a un an ou deux Une façon d'adapter les applications est d'utiliser la largeur 320 comme norme. Si la taille dépasse 320, elle sera toujours affichée dans les spécifications 320. Cette méthode de mise en œuvre est représentée par l'application Web Taobao, mais récemment par le mobile Taobao. la page d'accueil a été revue et utilise rem Dans cette unité, la page d'accueil est toujours aussi déroutante qu'avant, avec des pages à largeur fixe et des pages à mise en page fluide.

L'unité couramment utilisée pour couper la mise en page est le px, qui est une unité absolue. Il existe de nombreuses méthodes pour l'adaptation de l'écran d'une application Web, telles que : une mise en page fluide, une largeur limitée, etc. par la réactivité, mais ces solutions ne sont pas les meilleures.

Par exemple, la solution de mise en page fluide présente de nombreux inconvénients. Bien qu'elle puisse s'adapter à différents écrans, l'effet d'affichage est extrêmement médiocre car seules quelques tailles de téléphones mobiles peuvent l'afficher parfaitement. les interactions veulent le plus, mais il existe encore de nombreuses entreprises dans l'industrie qui utilisent une mise en page fluide pour couper des applications Web. Jetez un œil à certains des cas que j'ai collectés ci-dessous :

1. . Ctrip

3. Lanting

Les sites Web ci-dessus sont tous implémentés à l'aide d'une technologie de mise en page fluide. Ils définissent la largeur par des pourcentages lors de la mise en page. Cependant, la hauteur est principalement fixée avec px, Ainsi, sur un téléphone mobile à grand écran, l'effet d'affichage sera que la largeur de certains éléments de la page sera très étirée, mais la hauteur sera toujours la même qu'avant et l'affichage réel sera très désordonné. L'inconvénient fatal de la mise en page est que l'effet observé sur des téléphones mobiles de quelques tailles seulement est souvent satisfaisant. En fait, de nombreux concepteurs visuels ne devraient pas être en mesure d'accepter cet effet car leurs dessins ne sont pas visibles sur les téléphones mobiles à grand écran. L'effet équivaut à un étirement horizontal.

La mise en page fluide n'est pas le moyen le plus idéal de la mettre en œuvre. Grâce à un grand nombre de mises en page en pourcentage, de nombreux problèmes de compatibilité surviendront également. Il existe également de nombreuses restrictions sur la conception, car elles doivent être conçues au niveau. Au début, compte tenu de l'impact de la disposition fluide sur les éléments, seule la disposition des éléments étirés horizontalement peut être conçue, ce qui présente de nombreuses limitations lors de la conception.

2. Méthode de largeur fixe

Il existe une autre méthode pour fixer la largeur de la page. Au début, certains sites Web fixaient la largeur de la page à 320 et laissaient la partie excédentaire vide de cette façon. , cela semble bien sur le front-end. Heureusement, la conception visuelle n'a plus besoin d'être limitée par la mise en page fluide, et le front-end n'a pas besoin de s'engager dans des mises en page fluides trompeuses. Cependant, cette solution présente certains problèmes. Par exemple, sur les téléphones mobiles à grand écran, les deux côtés sont laissés vides. Un autre problème est que sur les téléphones mobiles à grand écran, la page semble très petite et les boutons de commande sont également très petits. . La page d'accueil mobile de Taobao ressemblait initialement à ceci Made, mais récemment révisée, en utilisant rem.

3. Approche réactive

Il existe très peu de sites Web complexes de grandes entreprises en Chine qui utilisent cette approche du côté mobile. La raison principale est que le travail est énorme, donc. En général, les portails ou les sites de blog de petite et moyenne taille utiliseront la méthode réactive pour passer directement d'une page Web à une application Web en une seule étape, car cela permet de réduire les coûts et de ne plus avoir besoin de créer une application Web spécifiquement pour leur propre version de site Web.

4. Définir la fenêtre d'affichage pour la mise à l'échelle

La page d'accueil de l'application web de Tmall est réalisée de cette manière. Elle est mise à l'échelle en fonction de la largeur de 320. Le zoom maximum est de 320*1,3 = 416. En gros, elle peut être compatible avec l'écran de l'iPhone 6 plus s'il le souhaite. est zoomé à 416. , cette méthode est simple, grossière et efficace. Pour être honnête, je pense que c'est très efficace lors de l'utilisation de rem, dont nous parlerons ensuite. Cependant, certains étudiants ont signalé que la mise à l'échelle entraînerait le flou de certains éléments de la page lors de l'utilisation.

rem peut s'adapter à tous les écrans de la même manière

Ce qui précède a parlé de nombreuses solutions d'adaptation d'applications Web qui sont actuellement courantes dans la plupart des entreprises. Parlons ensuite du fonctionnement de rem.

Comme mentionné ci-dessus, rem est adapté via l'élément racine de la page Web. Nous pouvons contrôler la taille de rem en définissant la taille de la police html. Par exemple :

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

Démo La taille du bouton résultat du code ci-dessus est la suivante :

J'ai défini le html à 10px pour faciliter notre calcul, pourquoi 6rem est-il égal à 60px. Si le style de notre .btn reste inchangé pour le moment, nous modifierons la valeur de la taille de la police du HTML et verrons les changements ci-dessus dans le bouton :

html{
    font-size:40px;
}

Le résultat de la taille du bouton est le suivant :

Ce qui précède La largeur et la hauteur sont devenues le double des résultats ci-dessus. Nous avons uniquement modifié la taille de la police du code HTML, mais la taille du bouton dans le Web a été modifiée sans modifier les propriétés définies par le reste de la largeur. et la hauteur du style .btn.

En fait, à partir des deux cas ci-dessus, nous pouvons calculer combien de rem vaut 1px :

Premier exemple :

120px = 6rem * 20px (l'élément racine définit un grande valeur )

Le deuxième exemple :

240px = 6rem * 40px (l'élément racine définit une grande valeur)

On en déduit :

10px  = 1rem 在根元素（font-size = 10px的时候）；
20px  = 1rem 在根元素（font-size = 20px的时候）；
40px  = 1rem 在根元素（font-size = 40px的时候）；

Dans les deux exemples ci-dessus, nous avons constaté que le bouton du premier cas est agrandi par rapport au deuxième bouton dans des proportions égales. Le changement de la taille de la police HTML entraînera une modification de la taille du bouton. Nous n'avons pas besoin de modifier la largeur. et la hauteur préalablement définie pour le bouton. En fait, c'est ce que nous voulons le plus voir. Pourquoi dites-vous cela ? Ensuite, regardons un exemple :

D'après les deux démos ci-dessus, nous savons que changer la taille de la police du HTML peut modifier tous les éléments en utilisant les unités rem de la même manière, vous pouvez donc déboguer via le navigateur Chrome. Les outils peuvent être utilisé pour changer l'effet d'affichage de la troisième démo sur différents appareils, ou en zoomant sur la largeur du navigateur pour voir l'effet. On peut voir que quelle que soit la résolution, la mise en page est changée dans une proportion égale, et La. la mise en page n'est pas compliquée. J'ai simplement obtenu l'effet ci-dessus en modifiant simplement la valeur de la taille de la police en fonction de la résolution actuelle du navigateur via un morceau de js. Tous les éléments de la page n'avaient en aucun cas besoin d'être modifiés.

À ce stade, beaucoup de gens me demanderont certainement comment calculer les valeurs de taille de police​​à différentes résolutions ?

Tout d'abord, supposons que le brouillon de conception de page ci-dessus m'a été remis dans la taille standard de 640 (bien sûr, cette taille n'est certainement pas nécessairement 640, elle peut être 320, ou 480, ou 375) pour regarder un ensemble de tables.

La colonne bleue dans le tableau ci-dessus correspond à la taille de la page dans Demo3. La page est coupée avec une largeur de 640. Comment calculer la valeur de font-site sous différentes largeurs ? comprendre les changements numériques dans le tableau. Par exemple : 384/640 = 0,6, 384 est 0,6 fois de 640, donc la taille de police sous la largeur de page de 384 est également égale à 0,6 fois de celle-ci. À l'heure actuelle, la taille de police de 384 est égale à 12 px. . La largeur des différents appareils est calculée de la même manière.

Dans Demo3, j'ai utilisé JS pour calculer dynamiquement la taille de la police de l'élément racine. L'avantage est que toutes les résolutions d'appareil peuvent être compatibles et adaptées. La page d'accueil de Taobao utilise actuellement JS pour le calcul. Mais en fait, nous pouvons faire de l'adaptation sans JS. Généralement, lorsque nous créons des applications Web, nous comptons d'abord les principaux appareils d'écran de notre site Web, puis définissons les paramètres de requête multimédia pour ces appareils afin de réaliser l'adaptation, par exemple comme suit :

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

Bien entendu, les paramètres définis ci-dessus ne peuvent pas être entièrement adaptés à tous les appareils, mais une adaptation complète peut être obtenue à l'aide de JS. Lequel utiliser dépend de votre scénario de travail réel.

Ci-dessous, nous recommandons deux sites mobiles nationaux qui utilisent la technologie rem. Vous pouvez vous y référer pour voir leurs pratiques. Actuellement, seule la page d'accueil du mobile Taobao utilise rem. La page d'accueil de l'application native Taobao est une application Web intégrée. page d'accueil.

Page d'accueil de Taobao : m.taobao.com

D X : m.dx.com

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!