Sujet Précédent Sujet Suivant

Changer de style en fonction de la résolution

Fermé
TheBleedz - 16 mai 2014 à 17:13
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 17 mai 2014 à 01:35
Bonjour,
J'ai beau chercher avec mon ami Google, je tombe sur pleins de sites différents avec pleins de techniques différentes. J'aimerai savoir la quel est le plus adapter pour pouvoir adapter mon site en fonction de la taille de l'écran.
Plus précisément, je souhaite que, quand la taille est de 1920*1080 laisser mon style css comme ceci :
#contenair {
width: 100%;
height: 100%;
margin-left: -120px;
}
et quand la résolution de l'écran est de 1024*768 la modifier comme ceci :
#contenair {
width: 100%;
height: 100%;
}

Merci d'avance :)

A voir également:

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
17 mai 2014 à 01:35
Bonjour

avec mediaqueries

#contenair {
width: 100%;
height: 100%;
margin-left: -120px;
}

@media screen and (max-width: 1024px){
#contenair {
width: 100%;
height: 100%;
}
}

ici c'est le premier qui sera pris en compte pour un ecran qui a une largeur de plus de 1024 px
tout ce qui est a 1024px et moins ce sera la 2eme qui sera pris en charge

en général dans le responsive design on ne prend pas en compte le height car une page est plus ou moins longue suivant son contenu et suivant la resolution vertical il y auras plus ou moins de scroll vertical.

pense aussi que les tablettes ou les mobiles peuvent avoir des resolutions de moins de 800px et également qu'il y a des résolution intermédaires entre 1920px et 1024px

il faut aussi forcer les tablettes et mobiles a afficher le pixel réel (screen resolution) et pas le pixel virtuel (dezoom d'une page web) en mettant dans le head
<meta name="viewport" content="initial-scale=1.0">

voici 1 lien sur les media queries
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
1