Заставить медиазапрос CSS использовать размер html документа, а не браузер?

Question

Я пытаюсь использовать медиа-запросы для изменения ширины элемента в чанках в зависимости от ширины окна (это позволяет мне увеличить количество столбцов на странице без изменения ширины столбцов). Я хотел бы иметь возможность сделать это, используя em вместо пикселей, чтобы все выглядело правильно, если вы измените размер шрифта. Однако, если я использую следующее:

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

Медиа-запрос сработает, когда минимальная ширина окна достигнет 42 * 16px, размер шрифта по умолчанию для моего браузера (Safari), тогда как ширина страницы div # будет 42 * 12px, наследуя размер шрифта от HTML-элемент. Мне бы очень хотелось, чтобы медиа-запросы запускались в зависимости от ширины используемого текста. Есть ли способ заставить это работать?

Answer 1

Нет, вы не можете, потому что в медиа-запросе «Относительные единицы в медиа-запросах основаны на начальном значении, что означает, что единицы никогда не основаны на результатах объявлений.Например, в HTML единица «em» относится к начальному значению «font-size». (Спецификация медиазапроса, пункт 6 Units ).Начальное значение font-size равно medium, что соответствует физическому размеру в зависимости от браузера (независимо от того, что вы можете установить в CSS).

Выводы зависят от того, как вы установите размер шрифта.Если вы устанавливаете размер шрифта корневого элемента в пикселях, логично использовать пиксели и в медиа-запросах, поскольку использование em не обеспечит никакой гибкости.Если вы устанавливаете размер шрифта корневого элемента в процентах, имеет смысл использовать em в медиа-запросах, но вам просто нужно учесть, что em означает размер шрифта браузера по умолчанию, и вам нужно выбрать множительem соответственно.

Answer 2

Из W3C (http://www.w3.org/TR/CSS21/syndata.html)
Единица 'em' равна вычисленному значению свойства 'font-size' элемента, для которого она используется. Исключение составляет , когда происходит 'em'в значении самого свойства font-size , в этом случае относится к размеру шрифта родительского элемента .

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

Примечание: 42em, вероятно,никогда не превышайте 100% ширины окна браузера. Если вы измените @media таким образом, чтобы он действовал по-разному при разной ширине экрана (max-width:1200px), (max-width:1024px), вы, вероятно, получите больший эффект, который, я думаю, вам нужен.

Answer 3

Я только что искал то же самое, и AFAIK нет способа изменить «родной» размер шрифта браузера / устройства;но на самом деле это хорошо, если вы посмотрите на это определенным образом.

Медиа-запрос и тег html - если заданы в относительных единицах - относятся к одному и тому же базовому номеру на любом устройстве или браузере.(в случае настольных браузеров это 16px, но может отличаться на других устройствах или если пользователь изменяет их масштаб).

Так что, если вы установите размер текста html в процентах или мерах этогозначение (для рабочего стола, эквивалентного 12px, используйте 75% или 0,75em), а затем задайте медиазапросы на основе деления ширины пикселя на это значение (для рабочего стола, эквивалентного 960px, используйте 60em), все должно располагаться на местена каждом устройстве на любом уровне масштабирования.

См. также ссылка