web-dev-qa-db-fra.com

Comment rendre la largeur du corps égale à la largeur de l'appareil automatiquement dans la requête multimédia CSS3?

Je fais un site Web mobile maintenant et j'essaie de cibler différents appareils à l'aide de requêtes multimédias CSS3. Une partie de mon code est la suivante:

@media screen and (max-width:320px) {
body {
    width: 320px;
}
/* some other style */  
}

Comme vous pouvez le voir, je dois définir la largeur du corps explicitement pour m'assurer qu'elle ne montre pas la largeur que j'ai définie pour le bureau dans mon CSS normal, qui est de 920 pixels. Je me demande s'il existe un moyen de régler automatiquement la largeur du corps sur la largeur de l'appareil et je n'ai pas besoin de la définir manuellement chaque fois que je crée un nouveau @media.

Par ailleurs, j'ajoute également le code suivant dans ma balise head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
cssmedia-queries
17
chaonextdoor

Utilisez simplement width: auto;

Différence entre width: 100%; et width: auto; est que la largeur extérieure à 100% est 100% + padding-left + padding-right, intérieur 100%. Largeur extérieure de width: auto est 100%, la largeur intérieure est 100% - padding-left - padding-right si et seulement si display est block et qu'aucun float n'est défini (et aucun élément flottant sans clear n'est avant).

18
Boris Šuška

Vous pouvez aussi utiliser

width: 100vw;

Cela définira l'élément à 100% de la largeur de la fenêtre. Vous voudrez peut-être vérifier la compatibilité de vos navigateurs avant d'ajouter: http://caniuse.com/#search=vw

Plus d'informations sur le dimensionnement de la fenêtre d'affichage: https://css-tricks.com/viewport-sized-typography/

36
sh3nan1gans