Quel weggmaster n’a jamais gal\u00e9r\u00e9 pour son taf typographique, en ayant un texte qui se place mal et d\u00e9s\u00e9quilibre l’esth\u00e9tique du site en fonction de la taille de la fen\u00eatre du navigateur?<\/p>\n
Les unit\u00e9s absolues ne permettent pas de modifier la taille d’un texte en fonction de l’affichage et seront donc plus int\u00e9ressante pour des pages n\u00e9cessitant d’\u00eatre imprim\u00e9e, puisqu’une taille de police d\u00e9fini \u00e0 12 restera toujours \u00e0 12. Mais aujourd’hui avec la multiplication des supports et des \u00e9crans, il est n\u00e9cessaire de rendre les contenus beaucoup plus adaptables et fluides afin de permettre une meilleur ergonomie et de \u00a0rendre l’exp\u00e9rience de l’utilisateur plus agr\u00e9able.<\/p>\n Les sites sont donc maintenant tous \u00ab\u00a0responsive<\/strong><\/span>\u00a0\u00bb et s’adaptent normalement parfaitement \u00e0 votre taille d’\u00e9cran.<\/p>\n C’est la raison pour laquelle aujourd’hui, lors de la cr\u00e9ation d’un site web, on utilise les valeurs relatives, qui permettent de redimensionner les \u00e9l\u00e9ments \u00a0et ainsi augmenter leur lisibilit\u00e9.\u00a0Dans cette cat\u00e9gorie, les unit\u00e9s\u00a0em<\/em><\/strong> et rem<\/strong><\/em>, permettant un dimensionnement en cascade, sont les plus connus. Ces valeurs tr\u00e8s utiles, \u00a0ne servent pas uniquement \u00e0 d\u00e9finir la taille de vos textes. Elles peuvent \u00eatre \u00e9galement utilis\u00e9es pour fixer la taille des margin<\/strong><\/em> et des padding<\/strong><\/em> par exemple.<\/p>\n Mais il y a une autre alternative…<\/p>\n Afin de caler son texte dans les bonnes proportions de sa DIV, tout en \u00e9vitant les c\u00e9sures disgracieuses, l’utilisation des unit\u00e9s relatives au viewport est une solution int\u00e9ressante. Pour \u00eatre plus clair, il s’agit d’utiliser un code qui permettra \u00e0 notre texte de changer de taille en fonction de la largeur et\/ou de la hauteur de la fen\u00eatre du navigateur.<\/p>\n Vous pouvez donc ajouter \u00e0 cette liste ce qui suit:<\/p>\n Exemple:<\/p>\n Renseignez votre CSS ainsi:<\/p>\n p { Vous aurez alors un corps de texte pour la balise <p> qui vaudra 2% de la largeur du viewport et qui pourra donc s\u2019\u00e9tirer ou r\u00e9tr\u00e9cir si vous jouez sur la taille de la fen\u00eatre de votre navigateur .<\/p>\n","protected":false},"excerpt":{"rendered":" Quel weggmaster n’a jamais gal\u00e9r\u00e9 pour son taf typographique, en ayant un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[23,13],"tags":[],"yoast_head":"\n
\nNous avons \u00e0 notre disposition dans cette cat\u00e9gorie le px<\/em><\/strong>, le pt<\/em><\/strong>, le pc<\/em><\/strong>, le cm<\/em><\/strong> et le mm<\/em><\/strong>.<\/p>\n\n
\nfont-size: 2vw;
\n}<\/p><\/blockquote>\n