Comment faire de la largeur du corps de l'égalité de l'appareil-largeur automatiquement en CSS3 media query?

Je suis en train de faire un site web mobile et j'essaye de cibler les différents périphériques en utilisant CSS3 media queries. Une partie de mon code est comme suit:

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

Comme vous pouvez le voir, j'ai pour définir la largeur du corps explicitement assurez-vous de ne pas montrer la largeur j'ai mis pour ordinateur de bureau dans mon css, qui est 920px. Je me demandais si il n'y a aucune façon que la largeur du corps peut être configuré automatiquement à la largeur de l'appareil et je n'ai pas besoin de le régler manuellement à chaque fois que je créer un nouveau @media.

En passant, j'ai aussi ajouter le code suivant à l'intérieur de mon head tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Est quelque chose de mal avec width: 100%?
width: 100% ne fonctionne pas pour adsense sensible des blocs d'annonces,... il Faut définir la taille de l'

OriginalL'auteur chaonextdoor | 2013-02-26

  1. 14

    Suffit d'utiliser width: auto;

    Différence entre width: 100%; et width: auto; est que l'extérieur de la largeur de 100% est 100% + padding-left + padding-right, intérieure 100%. Largeur extérieure de width: auto est 100%, largeur intérieure est 100% - padding-left - padding-right si et seulement si display est block et pas de float est réglé (et ne flottait pas clair, c'est avant).

    Merci, mec!Encore une question, que j'ai mis tous les éléments de la largeur à l'intérieur de la balise body en pourcentage, quand je zoom, il semble que ces éléments d'une largeur sont toujours les mêmes, mais ce que je veux faire est de faire de la largeur d'un zoom avant trop, comment pourrais-je y parvenir?
    Vous pouvez définir uniquement min-width des biens à valeur fixe eg. min-width: 320px;. Ensemble, juste pour le plus petit soutenu @media taille que la taille minimale autorisée. Vous pouvez définir min-width pour tout élément aussi, mais il est de bonne pratique de définir toujours pour le corps parce que flotté éléments devraient changer leur position.
    Ne fonctionne pas toujours. Par exemple, si vous essayez de définir le bootstrap liste de la largeur de l'utilisation de ce. L'utilisation de la largeur: 100vw; au-dessous de @sh3nan1gans

    OriginalL'auteur Boris Šuška

  2. 33

    Vous pouvez également utiliser 

    width: 100vw;

    Qui va définir l'élément à 100% de la largeur de la fenêtre d'affichage.
    Vous voudrez peut-être consulter votre navigateurs compatibilité avant d'ajouter:
    http://caniuse.com/#search=vw

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

    C'est l'un des meilleurs conseils que j'ai vu lors de l'utilisation de CSS dans les navigateurs modernes. Cela est extrêmement utile et peut résoudre de nombreux problèmes complexes. Par exemple, lorsque vous avez un défilement de l'élément div qui est plus large que la fenêtre d'affichage et que vous souhaitez limiter l'enfant div à l'intérieur de ce div à un pour cent de vue du port de largeur. Merci beaucoup.

    OriginalL'auteur sh3nan1gans