|
La plupart des designers locaux préfèrent utiliser des px, tandis que la plupart des sites étrangers préfèrent utiliser em et rem, alors quelle est la différence entre les trois, et quels sont les avantages et inconvénients de chacun ? Faisons une introduction détaillée. Fonctionnalités PX : 1. IE ne peut pas ajuster la taille de police de ceux qui utilisent px comme unité ; 2. La raison pour laquelle la plupart des sites étrangers peuvent être ajustés est qu’ils utilisent em ou rem comme unités de police ; 3. Firefox peut ajuster px, em et rem, mais plus de 96 % des internautes chinois utilisent le navigateur IE (ou le noyau). Pixels px. Unités de longueur relative. Le pixel px est relatif à la résolution de l’écran du moniteur. (Cité du manuel CSS2.0) Em est une unité relative de longueur. Taille de police par rapport au texte à l’intérieur de l’objet en cours. Si la taille de police du texte de la ligne n’est pas fixée artificiellement, elle sera relative à la taille de police par défaut du navigateur. (Cité du manuel CSS2.0) La hauteur de police par défaut pour tout navigateur est de 16px. Tous les navigateurs non ajustés se conforment : 1em=16px. Alors 12px = 0,75em, 10px = 0,625em. Pour simplifier la conversion taille de police, vous devez déclarer font-size=62,5 % dans le sélecteur du corps en css, ce qui fait que la valeur em est 16px*62,5 %=10px, donc 12px=1,2em, 10px=1em, ce qui signifie que vous devez seulement diviser votre valeur px originale par 10, puis la remplacer par em comme unité. Caractéristiques de l’EM : 1. La valeur de em n’est pas fixe ; 2. Em hérite de la taille de police de l’élément parent. Donc, lorsque nous écrivons du CSS, nous devons prêter attention à deux choses : 1. Déclarer la taille de la police=62,5 % dans le sélecteur de corps ; 2. Divisez votre valeur px d’origine par 10 et remplacez-la par em comme unité ; 3. Recalculer les valeurs em de ces polices agrandies. Évitez les déclarations répétées de taille de police. C’est-à-dire pour éviter le phénomène de 1,2 * 1,2 = 1,44. Par exemple, si vous déclarez la taille de police de 1,2em dans #content, alors en déclarant la taille de police de p, elle ne peut être que 1em, pas 1,2em, car cet em n’est pas ce m, et cela devient 1em=12px car il hérite de la hauteur de police de #content. Caractéristiques REM rem est une nouvelle unité relative (racine em) ajoutée à CSS3, qui a attiré beaucoup d’attention. Quelle est la différence entre cette unité et EM ? La différence est que lorsque vous utilisez rem pour définir la taille de police d’un élément, elle reste la taille relative, mais la relative n’est que l’élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue, ce qui permet non seulement de modifier uniquement l’élément racine pour ajuster proportionnellement toutes les tailles de police, mais aussi d’éviter la réaction en chaîne de composition des tailles de police couche par couche. Actuellement, REM est pris en charge dans tous les navigateurs sauf IE8 et versions antérieures. Pour les navigateurs qui ne le supportent pas, la réponse est aussi très simple : écrire une instruction unité absolue. Ces navigateurs ignorent la taille de police définie avec rem. Voici un exemple : p {font-size :14px ; taille de police : 0,875rem ; } Note:Le choix des unités de police dépend en grande partie de votre projet, et si votre base d’utilisateurs utilise la dernière version du navigateur, alors REM est recommandé ; si la compatibilité est un problème, utilisez px, ou les deux. Voici une adresse d’outil de conversion des unités px, em, REM :http://pxtoem.com/
| 
Publié sur 21/03/2017 09:31:50
|
|
|
