Come rendere automaticamente la larghezza del corpo uguale alla larghezza del dispositivo nella media query CSS3?

Ora sto facendo un sito Web per cellulari e sto provando a scegliere come target diversi dispositivi utilizzando le query multimediali CSS3. Parte del mio codice è il seguente:Come rendere automaticamente la larghezza del corpo uguale alla larghezza del dispositivo nella media query CSS3?

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

Come potete vedere, devo impostare la larghezza del corpo in modo esplicito per assicurarsi che non mostra la larghezza ho impostato per il tavolo nel mio CSS normale, che è 920px . Mi chiedo se ci sia un modo in cui la larghezza del corpo può essere impostata automaticamente sulla larghezza del dispositivo e non è necessario impostarla manualmente ogni volta che creo un nuovo @media.

A proposito, ho anche aggiungere il seguente codice all'interno del mio tag head:

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

fonte

2013-02-26 chaonextdoor

sia qualcosa di sbagliato con 'width: 100%'? – cimmanon

'width: 100%' non funziona per le unità pubblicitarie reattive adsense ... Deve definire la dimensione – Jess

Basta usare width: auto;

Differenza tra width: 100%; e width: auto; è che la larghezza esterna per il 100% è 100% + padding-left + padding-right, interno 100% . La larghezza esterna di width: auto è 100%, la larghezza interna è 100% - padding-left - padding-right se e solo se display è block e non è impostato float (e nessun elemento flottante è vuoto prima).

fonte

2013-02-26 17:55:03

Grazie, amico! Ancora una domanda, come ho impostato la larghezza di tutti gli elementi all'interno del tag body in percentuale, quando zoomo, sembra che la larghezza di questi oggetti sia sempre la stessa, ma quello che voglio fare è ingrandire anche la loro larghezza, come potrei ottenere questo? – chaonextdoor

È possibile impostare solo la proprietà 'min-width' su valore fisso es. 'min-width: 320px;'. Impostalo solo per la dimensione '@ media' più piccola supportata come dimensione minima consentita. Puoi anche impostare 'min-width' per ogni elemento, ma è una buona pratica impostarlo sempre per il corpo perché gli elementi fluttuanti dovrebbero cambiare la loro posizione. –

Non funziona sempre. Ad esempio, se si tenta di impostare la larghezza del popover bootstrap usando questo. Usa la larghezza: 100vw; di seguito da @ sh3nan1gans –

È inoltre possibile utilizzare

width: 100vw;

che imposterà l'elemento al 100% della larghezza della finestra. Si potrebbe voler verificare la compatibilità dei browser prima di aggiungere: http://caniuse.com/#search=vw

Maggiori informazioni viewport dimensionamento: https://css-tricks.com/viewport-sized-typography/

fonte

2015-05-04 21:06:15 sh3nan1gans

Questo è uno dei migliori consigli che ho visto quando si utilizza CSS nei browser moderni. Questo è estremamente utile e può risolvere molti problemi complessi. Ad esempio, quando si dispone di un div scorrevole che è più largo della finestra e si desidera limitare il div child all'interno di questo div a una percentuale della larghezza della vista. Molte grazie. – Sunil

Come rendere automaticamente la larghezza del corpo uguale alla larghezza del dispositivo nella media query CSS3?

risposta

Problemi correlati