Changer de style en fonction de la résolution
TheBleedz
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
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 :)
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:
- Changer de style en fonction de la résolution
- Changer dns - Guide
- Modèle de style word - Guide
- Fonction si et - Guide
- Changer de carte graphique - Guide
- Changer clavier qwerty en azerty - Guide
1 réponse
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
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