• Le mieux 1

    "Le mieux étant l'ennemi du bien", pourquoi proposer, à des personnes qui ne demandent rien, des codes qui ne leur amèneront rien ?

    J'ai compris ... enfin !

    Voici mon article, publié le 11 Aout.

    Devant les réactions sur l'emploi d'une unité adaptative (% ou vw), je voudrais vérifier comment, des écrans de résolutions variées, affichent un même article, en dimensions soit fixes (pixels), soit adaptatives (% ou vw).

    Je dispose d'un écran de 1440x900px de résolution et un autre de 1920x1080px + vérification sur 1366x768px.

    Le paramétrage de mon blog est réglé sur un affichage de ma page à 100% ce qui devrait s'adapter à la largeur de l'écran de lecture: effectivement, sur les deux écrans, le cadre rose, paramétré en 100% de largeur remplit la totalité de la largeur de chaque écran.

    Si je place, dans ce cadre, trois autres cadres, chacun étant paramétré soit en %, soit en vw et soit en pixels, je vais comparer l'affichage entre les deux écrans.

    Chaque cadre témoin mesure 100px de haut.

    Je réalise cet article sur mon écran en 1920x1080px: la largeur des 3 cadres devrait être similaire... mais pas sur tout écran !

    - un cadre de 50% de largeur remplira automatiquement la moitié du cadre rose: remplissage vert,

    - un cadre de 50vw de largeur remplira automatiquement la moitié du cadre rose: remplissage rouge,

    - un cadre de 1920/2=960px, remplissage jaune, devra en faire de même sur cet écran; restera à vérifier si, sur l'écran plus petit, cette proportion est conservée.

    width:50%

    width:50vw

    width:960px

    Sur mon écran en 1920x1080px, le cadre vert (50%) est un peu moins large que les deux suivants mais est à peu près à la moitié du cadre rose.

    Les cadres rouge et jaune, sont de la même largeur et de moitié du cadre rose, en largeur.

    Sur votre écran ou vos écrans (si vous en possédez plusieurs de résolutions différentes), vous pouvez comparer l'affichage et vérifier l'utilité d'utiliser des unités adaptatives plutôt que fixes car, même si sur votre écran de réalisation d'article, tout vous paraît correct, il n'en est peut-être pas de même pour un visiteur, équipé différemment.

    Je suppose que, comme moi, vous avez constaté que le cadre en pixels, conserve sa largeur fixe, quel que soit l'écran de lecture, vous comprendrez l'intérêt à utiliser des unités adaptatives.

    Je vous conseille d'utiliser l'unité viewport VW pour vos largeur/hauteur/positionnement/taille police... car il ne s'agit que de remplacer px par vw, dans vos codes, en n'oubliant pas que l'unité vw est variable selon l'écran de lecture et plus grande que le px; exemple, mes bordures de cadres, que je faisais en 6px de largeur, je les fais désormais en 0.3vw, comme sur le cadre rose.

    Il ne s'agit ensuite, que de retrouver les valeurs qui nous conviennent, sans autre modification.