Pour r\u00e9sumer, nous allons proposer un corps de texte qui d\u00e9pend de la largeur de la fen\u00eatre du navigateur. Tr\u00e8s bien, mais que repr\u00e9sente une unit\u00e9 de Prenons un exemple plus parlant. Mon corps de texte aura un \u00e9quivalent de 10% de la largeur de mon viewport, \u00e0 savoir la largeur de la fen\u00eatre de votre navigateur. Il vous faudra donc recharger la page sur la page de d\u00e9monstration \u00e0 chaque redimensionnement de la fen\u00eatre du navigateur. Le support est encore partiel, mais ces unit\u00e9s sont utilisables pour bient\u00f4t, et d\u00e9j\u00e0 pour la cible iPhone, Chrome 20+, Firefox 19+, Opera 15.0+ et IE10+. Pour les curieux, voici \u00e9galement une petite exp\u00e9rimentation de respect d’un ratio 16:9 en fonction du viewport<\/a>.<\/p>\n Il existe une alternative en JavaScript – comme souvent – qui se nomme FitText.js<\/a>, qui est un plugin jQuery (h\u00e9las). Voir la d\u00e9monstration sur fittextjs.com<\/a><\/p>\n C’est probablement la meilleure alternative aujourd’hui, cependant elle ne fonctionne pas sur Internet Explorer.<\/p>\n Ces essais manquent de tests, n’h\u00e9sitez pas \u00e0 me faire vos retours dans les commentaires sur diff\u00e9rents navigateurs (Safari 6 Mac, Android, etc.). J’ai souvent eu l’occasion \u00e0 travers mes divers projets Web mobile (responsive), d’avoir \u00e0 r\u00e9duire la taille des polices de titre car m\u00eame un simple mot ne passait pas en largeur. Pour \u00e9viter d’avoir une c\u00e9sure sur chaque mot du titre, le plus simple \u00e9tait de s’autoriser une r\u00e9duction approximative du corps. (approximative… fa\u00e7on de […]<\/p>\n","protected":false},"author":4,"featured_media":3137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,12],"tags":[428,29,403,518],"coauthors":[],"class_list":["post-3099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-veille-technologique","tag-css3","tag-font","tag-responsive","tag-viewport"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3099"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3099\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3137"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3099"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nVous connaissez certainement les unit\u00e9s px<\/code>, em<\/code>, rem<\/code> ou pt<\/code> pour dimensionner vos corps de texte ? Rajoutez \u00e0 cette liste :<\/p>\n\n
vw<\/code> : \u00ab\u00a0Viewport Width\u00a0\u00bb, correspond \u00e0 l’unit\u00e9 relative \u00e0 la largeur de votre \u00e9cran<\/li>\nvh<\/code> : \u00ab\u00a0Viewport Height\u00a0\u00bb, correspond \u00e0 l’unit\u00e9 relative \u00e0 la hauteur de votre \u00e9cran<\/li>\nvmin<\/code> (vm<\/code> pour IE9) : \u00ab\u00a0Viewport Min\u00a0\u00bb, correspond \u00e0 l’unit\u00e9 relative \u00e0 la plus petite des deux dimensions (largeur ou hauteur selon l’orientation)<\/li>\nvmax<\/code> : \u00ab\u00a0Viewport Max\u00a0\u00bb, correspond \u00e0 l’unit\u00e9 relative \u00e0 la plus grande des deux dimensions (largeur ou hauteur selon l’orientation)<\/li>\n<\/ul>\nvw<\/code>, par exemple ?
\nC’est assez simple mais pas forc\u00e9ment intuitif de prime abord : 1 unit\u00e9 repr\u00e9sente 1% de la dimension de r\u00e9f\u00e9rence.<\/p>\n
\nSi j’\u00e9cris ce morceau de code CSS appliqu\u00e9 \u00e0 mon titre de niveau 1 :<\/p>\nh1 {\r\n font-size: 10vw;\r\n}<\/code><\/pre>\n
\nSur l’\u00e9cran que j’utilise actuellement, la d\u00e9finition est de 1920px de large, mon titre de niveau 1 aura alors une font-size<\/code> \u00e9quivalente \u00e0 192px<\/code>.<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/10\/w3c-logo.jpg\"){kind=logo}
Bien que la sp\u00e9cification du W3C sur ces unit\u00e9s<\/a> pr\u00e9voit qu’au changement de dimensions du viewport, les dimensions des \u00e9l\u00e9ments b\u00e9n\u00e9ficiant des unit\u00e9s vw, vh, vmin et vmax soient mis \u00e0 jour, il semblerait que Chrome n’en fasse qu’\u00e0 sa t\u00eate (Safari \u00e9galement probablement, mais je n’ai pas la version 6 sur PC \ud83d\ude09 )<\/p>\n
\nVoir la d\u00e9monstration<\/a>
\nJ’ai ajout\u00e9 un petit script JavaScript pour auto rafraichir le calcul, bas\u00e9 sur l’\u00e9v\u00e8nement \u00ab\u00a0resize\u00a0\u00bb de la fen\u00eatre.
\nPour les curieux, le voici, il est bas\u00e9 sur jQuery.<\/p>\n<script>\r\n $(window).resize(function() {\r\n\t$('h1, h2').css('z-index', 'auto'); \/\/auto reflow\r\n });\r\n<\/script><\/code><\/pre>\n
\nVoir le support sur CanIuse<\/a><\/p>\nSolution de secours en JS<\/h2>\n
![\"Fittext.js\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/10\/fittext-js.png\")
<\/a><\/p>\n
\nCette solution fonctionne a priori partout sauf sur IE et propose de rajouter dynamiquement un attribut style sur un \u00e9l\u00e9ment en faisant varier la taille de font-size en pixels.<\/p>\n\n
<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js\"><\/script>\r\n<script src=\"jquery.fittext.js\"><\/script><\/code><\/pre>\n<\/li>\n<script>\r\n $(\".responsive_headline\").fitText(); \/\/ basique\r\n $(\".responsive_h3\").fitText(1.2); \/\/ compression proportionnelle\r\n $(\".responsive_headline\").fitText(0.8); \/\/ d\u00e9compression proportionnelle\r\n $(\".responsive_headline\").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); \/\/ compression avec taille max et taille min\r\n<\/script><\/code><\/pre>\n<\/li>\n<\/ol>\nConclusion<\/h2>\n
\nMerci \u00e0 vous !<\/p>\nLiens utiles<\/h2>\n
\n