Jak automatycznie dopasować szerokość korpusu do szerokości urządzenia w zapytaniu o media CSS3?

Question

Robię teraz stronę mobilną i próbuję kierować reklamy na różne urządzenia za pomocą zapytań o media CSS3. Część mojego kodu jest następujący:

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

Jak widać, mam ustawić szerokość ciała wyraźnie się upewnić, że nie pokazują szerokość ja ustawiony na biurku w moim normalnym CSS, który jest 920px . Zastanawiam się, czy jest jakiś sposób, aby szerokość ciała była ustawiana automatycznie na szerokość urządzenia i nie muszę ustawiać tego ręcznie za każdym razem, gdy tworzę nowy @media.

Nawiasem mówiąc, ja też dodać następujący kod w moim head tagu:

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

Answer 1

Wystarczy użyć width: auto;

Różnica między width: 100%; i width: auto; jest to, że szerokość zewnętrzna 100% jest 100% + padding-left + padding-right wewnętrzna 100% . Szerokość zewnętrzna width: auto to 100%, szerokość wewnętrzna to 100% - padding-left - padding-right wtedy i tylko wtedy, gdy display jest ustawiona na block i nie jest ustawiona float (a przedtem element pływający nie jest wyczyszczony).

Answer 2

Można również użyć

width: 100vw; 

To spowoduje ustawienie elementu do 100% szerokości rzutni za. Możesz chcieć sprawdzić kompatybilność przeglądarek przed dodaniem: http://caniuse.com/#search=vw

Więcej informacji na temat rozmiaru rzutni: https://css-tricks.com/viewport-sized-typography/