La query sui supporti CSS utilizza la dimensione em del documento html anziché del browser?

Question

Sto cercando di utilizzare le query multimediali per modificare la larghezza di un elemento in blocchi in base alla larghezza della finestra (questo mi consente di aumentare il numero di colonne sulla pagina senza che la larghezza delle colonne cambi). Mi piacerebbe essere in grado di farlo usando em invece di pixel in modo che tutto funzioni correttamente se si modifica la dimensione del carattere. Tuttavia, se uso il seguente:

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

La media query attiverà quando la larghezza minima della finestra raggiunge 42 * 16px, la dimensione del font di default per il mio browser (Safari), mentre la larghezza del div # la pagina sarà 42 * 12px, ereditando la dimensione del carattere dall'elemento html. Mi piacerebbe molto che le query multimediali si attivassero in base alla larghezza del testo che sto usando, c'è un modo per farlo funzionare?

Answer 1

No, non si può, perché in una media query, “unità relative a domande dei media si basano sul valore iniziale, il che significa che le unità non sono mai basati sui risultati delle dichiarazioni. Ad esempio, in HTML, l'unità 'em' è relativa al valore iniziale di 'font-size'. "(Specifiche di Media Query, clausola 6 Units). Il valore iniziale di font-size è medium, che viene mappato su una dimensione fisica in modo dipendente dal browser (indipendentemente da qualsiasi cosa che è possibile impostare in CSS).

Le conclusioni dipendono da come si imposta la dimensione del carattere. Se si impostano le dimensioni del carattere dell'elemento radice in pixel, è logico utilizzare anche i pixel nelle query multimediali, poiché l'uso di em non fornisce alcuna flessibilità. Se si imposta la dimensione del carattere dell'elemento radice in percentuale, è consigliabile utilizzare em nelle query multimediali, ma è sufficiente tenere conto del fatto che em indica la dimensione predefinita del carattere del browser e occorre selezionare il moltiplicatore di em di conseguenza.

Answer 2

Da W3C (http://www.w3.org/TR/CSS21/syndata.html)
L'unità 'em' è uguale al valore calcolato della 'font-size' dell'elemento sulla che è usato L'eccezione è quando "em" si verifica nel valore della proprietà "font-size", nel qual caso si riferisce alla dimensione del carattere dell'elemento genitore.

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

Nota: 42em probabilmente non sarà mai al 100% della larghezza della finestra del browser. Se modifichi @media in modo diverso per le diverse larghezze dello schermo, (max-width:1200px), (max-width:1024px), probabilmente otterrai più effetti che penso tu stia cercando.

Answer 3

Ho appena esaminato la stessa cosa e AFAIK non è possibile modificare la dimensione del carattere "nativo" del browser/dispositivo; ma questo è veramente buono se lo guardi in un certo modo.

Il media-query e il tag html - se impostato in unità relative-- si riferiscono allo stesso numero di base su qualsiasi dispositivo o browser (nel caso di browser desktop è 16px, ma può essere diverso su altri dispositivi o se l'utente cambia lo zoom).

Quindi, se si imposta la dimensione del testo html in una percentuale o em-misura di questo valore (per l'equivalente desktop di 12px, utilizzare 75% o 0,75em), quindi impostare le query multimediali in base alla divisione del pixel larghezza per questo valore (per l'equivalente desktop di 960px, usa 60em), tutto dovrebbe cadere in posizione su ogni dispositivo a ogni livello di zoom.

Vedi anche questo link