Maison > interface Web > Tutoriel d'amorçage > le corps du texte

Comment convertir automatiquement px en rem dans bootstrap

爱喝马黛茶的安东尼
Libérer: 2019-07-23 13:49:10
original
5411 Les gens l'ont consulté

Comment convertir automatiquement px en rem dans bootstrap

Conversion entre la valeur Rem et Px en CSS3 :

bootstrap default html{font-size : 10px;}

rem est une valeur de taille relative, qui est relative à l'élément racine ,

Par exemple, supposons que nous définissions la valeur de taille de police de html sur html{font-size : 87,5 % ;} (soit 14 px).

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Ensuite, les autres polices sont les valeurs obtenues en divisant la valeur souhaitée par 14

Par exemple, la taille par défaut du thème vingt-douze est de 960 pixels ; converti en rem est de 960/14 = 68,57142857142857rem ; 24 px de

remplissage est de 24/14 = 1,714285714285714rem, et ainsi de suite.

Le 14 ci-dessus est une variable. Par rapport à votre réglage de la taille de police de l'élément racine HTML, si vous le définissez à 62,5%, le diviseur devient 10. Le tableau de comparaison est celui indiqué à droite :

Je ne sais pas quels sont les avantages de l'utilisation de cette unité rem, mais si vous choisissez 62,5% comme taille de police de l'élément racine, alors la conversion entre px et rem consiste à diviser directement px par 10 pour obtenir rem, qui est meilleur que em C'est beaucoup plus simple, je n'ai toujours pas compris comment convertir entre em et px.

De plus, rem n'est pas pris en charge dans les versions ie8 et inférieures, mais d'autres navigateurs le prennent en charge. Si vous souhaitez considérer ie8 et inférieures, vous pouvez définir un px puis définir un rem comme le fichier vingt-douze par défaut.

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal