Discussion :

[feriela]

Bonjour à tous,

J'ai un problème d'affichage, pourriez vous m'aider s'il vous plait! alors ma page ne s'adapte pas en fonction des différentes résolutions d'écran existantes, on m'a orienté vers les média queries la question que je me pose et que je vous pose aussi, pour que ma page s'adapte à toutes les résolutions d'écran existantes je dois spécifier tout les médias avec les résolutions ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen and (min-device-width:1920px)" />
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen and (min-device-width:1600px) and (max-device-width:1919px)" />
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen and (min-device-width:1280) and (max-device-width:1599px)" />
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen and (min-device-width:1024) and (max-device-width:1279px)" />
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen and (max-device-width:1023px)" />

Si je prends par exemple un ecran dont la résolution est de 1680 ceci appliquera le css du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(min-device-width:1600px) and (max-device-width:1919px)

Cependant la page ne s'affiche plus de la même façon d'où ma question; est-ce que je dois spécifier toutes les résolutions qui existe ? faire un style pour chacune ? ou est-ce que je m'y prends mal ? y aurait t-il une autre manière de procéder ?

Merci a vous

Bonne journée

Cordialement

[rodolphebrd]

Bonjour,

est-ce que je dois spécifier toutes les résolutions qui existe ?

Non !
Il y a la possibilité de redimensionner en fonction des points de rupture.

ou est-ce que je m'y prends mal ?

Oui

y aurait t-il une autre manière de procéder ?

En consultant les tutoriels du forum : Les fondamentaux du responsive web design

[Sergejack]

Malheureusement c'est encore plus compliqué que cela.

Il y a non seulement les dimensions de l'écran mais aussi le device-pixel-ratio (maintenant remplacé par la notion de "resolution", vive le terme qui crée de la confusion !!).

En gros avec un DPR de 2 càd une résolution (Merde !!) de 192DPI, 100 cm = 50 vértiable cm.



Mieux vaut utiliser des observateurs de media queries en javascript pour faire les calculs des combinaisons....

[Candygirl]

Bonjour,

Au vu des nombres que tu donnes, tu ne cherches à adapter ton site que sur des écrans de bureau. Si ton site réagit mal d'une résolution à une autre, c'est très probablement qu'il est mal pensé niveau du positionnement des différents éléments. Difficile de t'orienter plus sans voir ton code.