Le mieux 3

Le mieux 3

Je suis incorrigible mais, malgré un à priori négatif, certain(e)s s'intéressent aux unités adaptatives.

Je vais préparer cette page comme beaucoup préparent leurs articles: un texte et des images, les unes unes sous les autres, par l'icône "Image".

Je vais les héberger en taille personnalisée, c'est à dire dans leur taille d'origine, ne pas mettre de lien dessus et les centrer.

Une fois mon article préparé, j'ouvrirai le code source (<>) pour voir comment le programme a écrit mon article: il aura utilisé des pixels et des points pour la police,et je remplacerai les pixels et points, partout où il y en a (taille police, dimension image, position image...) par des vw, en n'oubliant pas qu'un vw est l'équivalent de 1% de la largeur d'un écran, quel qu'il soit, et est donc au minimum l'équivalent de 13px pour les écrans de 1366px.

Voilà le contenu du code source:

Je suis incorrigible mais, malgré un à priori négatif, certain(e)s s'intéressent aux unités adaptatives.
Je vais préparer cette page comme beaucoup préparent leurs articles: un texte et des images, les unes unes sous les autres, par l'icône "Image".
Je vais les héberger en taille personnalisée, c'est à dire dans leur taille d'origine, ne pas mettre de lien dessus et les centrer.
Une fois mon article préparé, j'ouvrirai le code source (<>) pour voir comment le programme a écrit mon article: il aura utilisé des pixels et je remplacerai les pixels, partout où il y en a (taille police, dimension image, position image...) par des vw, en n'oubliant pas qu'un vw est l'équivalent de 1% de la largeur d'un écran, quel qu'il soit, et est donc au minimum l'équivalent de 13px pour les écran de 1366px. 
<img src="http://ekladata.com/ZKVDkQwfDgHzPSphSQjppR4Yf4I.jpg" alt="Le mieux 3" />
<img src="http://ekladata.com/QNfJpndtQAbV1q8ToyrZ-JYhdUM.jpg" alt="Le mieux 3" />
<img src="http://ekladata.com/-kZG905o8lYyu4MZud4qtRl3UJM.jpg" alt="Le mieux 3" />
<img src="http://ekladata.com/jyRu5cM3lkVBn9gxRQ2qQEWjdpU.jpg" alt="Le mieux 3" />
<img src="http://ekladata.com/JJtf2ExIbha23XqvzLcXetGS1Bw.jpg" alt="Le mieux 3" />
 

Pour le texte, je vais choisir une taille de 0.8vw, qui semble correspondre à 12pt: pour cela, je vais ajouter un attribut à chaque paragraphe texte: font-size:0.8vw;.

Pour les images, je vais choisir une largeur de 80vw (80% de la largeur de l'écran), puisque ma zone article est assez grande; La hauteur des images sera calculée automatiquement, pour respecter le ration 16/9.

Je vais ajouter l'attribut style="width:80vw;" à chaque adresse d'image, ce qui me donnera, comme code:

Je suis incorrigible mais, malgré un à priori négatif, certain(e)s s'intéressent aux unités adaptatives.
Je vais préparer cette page comme beaucoup préparent leurs articles: un texte et des images, les unes unes sous les autres, par l'icône "Image".
Je vais les héberger en taille personnalisée, c'est à dire dans leur taille d'origine, ne pas mettre de lien dessus et les centrer.
Une fois mon article préparé, j'ouvrirai le code source (<>) pour voir comment le programme a écrit mon article: il aura utilisé des pixels et je remplacerai les pixels, partout où il y en a (taille police, dimension image, position image...) par des vw, en n'oubliant pas qu'un vw est l'équivalent de 1% de la largeur d'un écran, quel qu'il soit, et est donc au minimum l'équivalent de 13px pour les écran de 1366px. 
<img style="width:80vw;" src="http://ekladata.com/ZKVDkQwfDgHzPSphSQjppR4Yf4I.jpg" alt="Le mieux 3" />
<img style="width:80vw;" src="http://ekladata.com/QNfJpndtQAbV1q8ToyrZ-JYhdUM.jpg" alt="Le mieux 3" />
<img style="width:80vw;" src="http://ekladata.com/-kZG905o8lYyu4MZud4qtRl3UJM.jpg" alt="Le mieux 3" />
<img style="width:80vw;" src="http://ekladata.com/jyRu5cM3lkVBn9gxRQ2qQEWjdpU.jpg" alt="Le mieux 3" />
<img style="width:80vw;" src="http://ekladata.com/JJtf2ExIbha23XqvzLcXetGS1Bw.jpg" alt="Le mieux 3" />
 

Ce code de votre article, qui est maintenant en unités adaptatives est, si vous voulez le modifier dans une page hors code source, est à copier sur une feuille de bloc note et pas sur une feuille de traitement de texte.

Ce code modifié est à coller, dans le code source, à la place du code précédent, non modifié; le résultat, chez moi sera ce qui est ci-dessous.

Pour vérifier que votre article s'adapte bien à chaque écran, il vous faut le regarder avec un média avec un écran plus petit ou plus grand.

Je suis incorrigible mais, malgré un à priori négatif, certain(e)s s'intéressent aux unités adaptatives.

Je vais préparer cette page comme beaucoup préparent leurs articles: un texte et des images, les unes unes sous les autres, par l'icône "Image".

Je vais les héberger en taille personnalisée, c'est à dire dans leur taille d'origine, ne pas mettre de lien dessus et les centrer.

Une fois mon article préparé, j'ouvrirai le code source (<>) pour voir comment le programme a écrit mon article: il aura utilisé des pixels et je remplacerai les pixels, partout où il y en a (taille police, dimension image, position image...) par des vw, en n'oubliant pas qu'un vw est l'équivalent de 1% de la largeur d'un écran, quel qu'il soit, et est donc au minimum l'équivalent de 13px pour les écran de 1366px.