Czy kwerenda CSS dla mediów korzysta z rozmiaru em dokumentu html, a nie przeglądarki?

Question

Próbuję użyć zapytań o media, aby zmienić szerokość elementu w porcjach na podstawie szerokości okna (pozwala to zwiększyć liczbę kolumn na stronie bez zmiany szerokości kolumn). Chciałbym móc to zrobić, używając em zamiast pikseli, aby wszystko wyglądało dobrze, jeśli zmienisz rozmiar czcionki. Jednakże, jeśli mogę użyć następujących czynności:

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; 
    } 
} 

Zapytanie mediów wywoła gdy minimalna szerokość okna osiągnie 42 * 16px, domyślny rozmiar czcionki dla mojej przeglądarce (Safari), natomiast szerokość div # strona będzie miała 42 * 12 pikseli, dziedzicząc rozmiar czcionki z elementu html. Naprawdę chciałbym, aby zapytania o media były wyzwalane na podstawie szerokości tekstu, którego używam, czy jest jakiś sposób, aby to zadziałało?

Answer 1

Nie, nie można, ponieważ w zapytaniu mediów, „jednostki względne w zapytaniami mediów są na podstawie wartości początkowej, co oznacza, że ​​jednostki nie są oparte na wynikach deklaracji. Na przykład w HTML, jednostka 'em' jest względna do wartości początkowej "rozmiaru czcionki". "(Media Query spec, klauzula 6 Units). Początkowa wartość font-size to medium, która jest mapowana do rozmiaru fizycznego w sposób zależny od przeglądarki (niezależnie od wszystkiego, co można ustawić w CSS).

Wnioski zależą od tego, jak ustawić rozmiar czcionki. Jeśli ustawiasz rozmiar czcionki elementu głównego w pikselach, logiczne jest również używanie pikseli w zapytaniach o media, ponieważ użycie em nie zapewnia żadnej elastyczności. Jeśli ustawisz rozmiar czcionki elementu głównego jako wartość procentową, to w zapytaniach o media warto używać em, ale wystarczy wziąć pod uwagę, że em oznacza domyślny rozmiar czcionki w przeglądarce i musisz odpowiednio wybrać mnożnik em.

Answer 2

Od W3C (http://www.w3.org/TR/CSS21/syndata.html)
Jednostka „em” jest równa wartości obliczonej z „font-size” elementu na z którego jest używany. Wyjątkiem jest , gdy 'em' występuje w wartości samej własności "font size", w którym to przypadku odnosi się do rozmiaru czcionki elementu nadrzędnego.

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 */ 
} 

Uwaga: 42em prawdopodobnie nigdy nie będzie w 100% szerokości okna przeglądarki. Jeśli zmienisz @media, aby działał inaczej dla różnych szerokości ekranu: (max-width:1200px), (max-width:1024px) prawdopodobnie uzyskasz większy efekt, o którym myślę, że chcesz.

Answer 3

Właśnie patrzyłem na to samo, a AFAIK nie ma sposobu na zmianę "natywnego" rozmiaru czcionki przeglądarki/urządzenia; ale to jest naprawdę dobre, jeśli spojrzysz na to w określony sposób.

Zapytanie o media i znacznik html - jeśli ustawione w jednostkach względnych - odnoszą się do tego samego numeru bazowego na dowolnym urządzeniu lub przeglądarce (w przypadku przeglądarek na komputery jest to 16 pikseli, ale może być inne inne urządzenia lub jeśli użytkownik zmieni powiększenie).

Jeśli więc ustawisz rozmiar tekstu w formacie html na wartość procentową lub em-miarę tej wartości (dla odpowiednika 12px na pulpicie, użyj 75% lub 0,75em), a następnie ustaw zapytania multimedialne na podstawie podzielenia piksela szerokość o tę wartość (dla ekwiwalentu pulpitu 960px, użyj 60em), wszystko powinno wpaść na każde urządzenie na każdym poziomie powiększenia.

Zobacz także ten link