CSS Media Queries

Question

Sto cercando di adattare la mia app Web per tablet ai telefoni cellulari. La funzionalità Media Query sembra perfetta e il mio test iniziale lo conferma. La domanda che ho è: con telefoni e tablet che cambiano il loro orientamento da verticale a orizzontale (a rotazione del dispositivo) a cosa si riferisce la larghezza massima?

In altre parole, i telefoni Android più grandi hanno risoluzioni sulla falsariga di 480x800, l'iPhone4 ha una risoluzione di 640x960 e l'originale Blackberry Torch ha una risoluzione di 360x480. Queste sono tutte le risoluzioni (W x H) quando i dispositivi sono mantenuti in modalità verticale, quindi le larghezze sono rispettivamente 400, 640 e 360. Tuttavia, quando si ruota il dispositivo in orizzontale, l'altezza 'diventa' la larghezza per scopi di visualizzazione. Pertanto, le larghezze effettive in orizzontale diventano rispettivamente 800, 960 e 480 e le larghezze 800 e 960 si sovrappongono a larghezze del panorama del tablet che compromettono il display.

Quindi, la larghezza è sempre larghezza? Vale a dire, quando il dispositivo riporta le sue dimensioni, il valore della larghezza rimane sempre lo stesso per gli scopi CSS o il valore della larghezza cambia quando il dispositivo ruota in orizzontale?

Grazie a tutti voi in anticipo.

Answer 1

Il valore della larghezza cambierà quando il dispositivo viene capovolto, poiché anche la larghezza della pagina visualizzata viene modificata.

Se si vuole interrogare se il dispositivo viene utilizzato in modalità orizzontale o verticale, è possibile utilizzare la proprietà orientamento invece:

@media screen and (orientation: portrait) { 
} 

Questo controllerà se la larghezza della finestra del browser è più grande della altezza (orientamento: il paesaggio farà il contrario). Per ottenere i migliori risultati, probabilmente dovrai utilizzare una combinazione di molte proprietà MQ utilizzando l'operatore 'e' per eseguire test concatenati. cioè .:

@media screen and (orientation: landscape) and (max-width: 960px) { 
} 

un elenco completo delle proprietà MQ è disponibile here.

Answer 2

Il valore delle modifiche css in base al suo paesaggio o non sul cellulare come larghezza e altezza delle modifiche di visualizzazione sul telefono cellulare quando viene ruotato il telefono o il tablet. quindi devi essere specifico quando definisci lo stile css per indirizzare ciò che vuoi.

@media (min-width: 700px) e (orientamento: orizzontale) {

}

per i dettagli comprensione delle media query visitare: http://letsdopractice.com/css-media-queries/

Answer 3

I media query vengono utilizzati per definire lo stile per diverse dimensioni dello schermo. Ho intenzione di parlarvi di nozioni di base sulle domande dei media. La sintassi dei media CSS Query è:

@media not|only mediatype and (media feature) { 
CSS-Code; 
} 

Per una dettagliata su media query sintassi toturial si prega di visitare This Site