Медиа-запросы с rem-единицами в Chrome?

Можно ли использовать rem единиц в медиа-запросах Chrome?

rem юниты работают в Chrome без нареканий, только кажется, что они не поддерживаются в медиазапросах. Это возможно? Или что-то еще не так с этим CSS?

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

Прямой эфир на http://jsfiddle.net/jsQ2N/2/show/, только em версию на http://jsfiddle.net/jsQ2N/3/show/.


google-chrome css media-queries
person gioele    schedule 30.08.2012    source источник
comment
Похоже, эту проблему можно обойти, используя em единиц. На уровне медиа-запроса 1em должно быть равно 1rem (или так предполагает ‹github .com/scottjehl/Respond/issues/18#issuecomment-2205078›).   -  person gioele    schedule 30.08.2012
comment
Chrome 28.0.1500.95 поддерживает единицы rem в медиа-запросах, но, по-видимому, Safari 5.1 не поддерживает...   -  person ericsoco    schedule 15.08.2013

Ответы (3)


arrow_upward
12
arrow_downward

В спецификации сказано следующее об относительных единицах, таких как rem и em:

Относительные единицы в медиа-запросах основаны на начальном значении, что означает, что единицы никогда не основываются на результатах объявлений. Например, в HTML единица измерения «em» относится к начальному значению «размера шрифта».

(Исходное значение font-size равно medium, что обычно равно размеру шрифта по умолчанию в пользовательских настройках браузера.)

Поскольку Media Queries 3 не определяет специальных правил для каких-либо конкретных единиц, кроме приведенной выше цитаты об относительных единицах, rem должен действовать как em, вычисляя начальное значение font-size. Если это не работает в Chrome, скорее всего, это ошибка.

person BoltClock    schedule 30.08.2012
comment
По той же логике он также не сможет получить относительную font-size для em! - person CourtDemone; 20.11.2013
comment
@CourtDemone: Ты прав. Не знаю, о чем я думал, когда писал это. Исправлено. - person BoltClock; 20.11.2013

arrow_upward
5
arrow_downward

Оказывается, это проблема Webkit #78295 (нерешенная на 2012-08): Поддержка Блок CSS rem в Media Queries (через http://fvsch.com/code/bugs/rem-mediaquery/).

person gioele    schedule 30.08.2012
comment
Что ж, репортеры говорят, что это ошибка, в том числе и потому, что она работает в других движках. Разработчики Chrome еще не говорили. - person gioele; 30.08.2012
comment
После нескольких часов путаницы кажется, что использование правил rem в @media нарушает стили в Safari. em и px работают нормально. Странный. - person sheriffderek; 28.05.2013

arrow_upward
0
arrow_downward

После публикации ответа ниже этот вопрос беспокоил меня. Я провел еще немного тестов в Chrome с сайтом, над которым работаю. Сообщение о том, что rem является ошибкой в ​​Chrome, верно, они не работают, поэтому я перехожу на пиксели только для медиа-запросов.

*Чтобы ответить на ваш вопрос, rems работает со мной, чтобы настроить высоту области контента с помощью медиа-запросов. Это то, как Chrome интерпретирует ширину браузера, которая, кажется, отличается от Firefox, но это не проблема, основанная на rem.

Имейте в виду, что когда я использую rems и ems, это происходит после установки размера шрифта: 1em; или размер шрифта: 16px; для html или тела. Я склоняюсь к размеру шрифта: 1em; в теге html. Это создает значение по умолчанию, которое работает с тем, что пользователь установил для размера шрифта по умолчанию, на любом устройстве, которое он использует. Rem относятся к корневому значению 1em. Это корневое значение задается размером шрифта пользователя по умолчанию, поэтому все должно масштабироваться в соответствии с предпочтениями размера шрифта пользователя и не зависеть от устройства/плотности пикселей.

Это означает, что независимо от того, использует ли пользователь «обычное» устройство с разрешением 72 или 96 пикселей на дюйм или Retina (или другой экран с высокой плотностью пикселей), все должно выглядеть «относительно» одинаково от устройства к устройству.

person Max West    schedule 27.12.2012