В чем разница между «экраном» и «только экраном» в медиа-запросах?


487

В чем разница между screen и only screenв медиа-запросах?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Почему мы должны использовать only screen ? Разве screenсама по себе не предоставляет достаточно информации для отображения только на экране?

Я видел много адаптивных сайтов, использующих любой из этих трех способов:

@media screen and (max-width:632px)
@media (max-width:632px)
@media only screen and (max-width:632px)

Ответы:


543

Давайте разберем ваши примеры один за другим.

@media (max-width:632px)

Это говорит о том, что для окна с max-width632px вы хотите применить эти стили. При таком размере вы будете говорить о чем-нибудь меньшем, чем экран рабочего стола в большинстве случаев.

@media screen and (max-width:632px)

Это говорит о том, что устройство с screenокном max-widthв 632 пикселя применяет стиль. Это почти идентично приведенному выше, за исключением того, что вы указываете, screenв отличие от других доступных типов носителей, наиболее распространенным из которых является другое print.

@media only screen and (max-width:632px)

Вот цитата прямо из W3C, чтобы объяснить это.

Ключевое слово «only» также можно использовать для скрытия таблиц стилей от старых пользовательских агентов. Пользовательские агенты должны обрабатывать медиазапросы, начинающиеся с «only», как если бы ключевое слово «only» отсутствовало.

Поскольку такого типа мультимедиа как «только» не существует, старые браузеры должны игнорировать таблицу стилей.

Вот ссылка на эту цитату которая показана в примере 9 на этой странице.

Надеюсь, это проливает свет на запросы СМИ.

РЕДАКТИРОВАТЬ:

Обязательно посмотрите @hybrids отличный ответ о том, как на onlyсамом деле обрабатывается ключевое слово.


24
Для тех , кто ищет лучшее объяснение , почемуonly ключевое слово будет скрывать таблицы стилей от старых браузеров, смотрите ответ на @hybrid ниже. Он объясняет это очень хорошо.
JMTyler

1
Гибридный ответ хорош, но мне также нравится этот ответ, потому что он обращается к медиа-запросам внутри CSS, а не только к mediaатрибуту linkэлемента.
Чарви

2
на каком устройстве нет экрана?
Кокодоко,

3
@ Кокодоко те, которые не нужны. А если серьезно, принтеры и программы чтения с экрана не обязательно имеют экраны. Плюс что-либо еще в настоящее время или в будущем, которое не идентифицируется как screenтаковое, как что-либо перечисленное в других типах носителей.
Мэтью Грин

1
@Kokodoko CSS существует, чтобы создать разделение проблем между содержанием и представлением. Презентация охватывает гораздо больше, чем просто то, что можно увидеть на экране. Это важное различие, о котором следует помнить, независимо от того, для чего вы разрабатываете.
Мэтью Грин,

231

Следующее от Adobe docs .


Спецификация медиа-запросов также предоставляет ключевое слово only, которое предназначено для скрытия медиа-запросов от старых браузеров. Мол not, ключевое слово должно прийти в начале объявления. Например:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Браузеры, которые не распознают медиазапросы, ожидают разделенный запятыми список типов медиа, и в спецификации говорится, что они должны усекать каждое значение непосредственно перед первым не алфавитно-цифровым символом, который не является дефисом. Итак, старый браузер должен интерпретировать предыдущий пример так:

media="only"

Поскольку такого типа носителя не существует, таблица стилей игнорируется. Точно так же старый браузер должен интерпретировать

media="screen and (min-width: 401px) and (max-width: 600px)"

в виде

media="screen"

Другими словами, он должен применять правила стиля ко всем экранным устройствам, даже если он не знает, что означают медиазапросы.

К сожалению, IE 6–8 не смог правильно реализовать спецификацию.

Вместо применения стилей ко всем экранным устройствам, он полностью игнорирует таблицу стилей.

Несмотря на такое поведение, рекомендуется по-прежнему использовать префикс медиа-запросов только в том случае, если вы хотите скрыть стили от других, менее распространенных браузеров.


Итак, используя

media="only screen and (min-width: 401px)"

а также

media="screen and (min-width: 401px)"

будет иметь тот же эффект в IE6-8: оба препятствуют использованию этих стилей. Они, однако, все еще будут загружены.

Кроме того, в браузерах, которые поддерживают медиазапросы CSS3, обе версии будут загружать стили, если ширина области просмотра больше, 401pxа тип медиа - экран.

Я не совсем уверен, для каких браузеров, которые не поддерживают медиазапросы CSS3, потребуется onlyверсия

media="only screen and (min-width: 401px)" 

в отличие от

media="screen and (min-width: 401px)"

чтобы убедиться, что это не интерпретируется как

media="screen"

Это был бы хороший тест для тех, кто имеет доступ к лаборатории устройств.


3
Так что, если мы говорим о медиа-запросах в файлах CSS, мы можем отбросить «только», потому что старые браузеры вообще не понимают медиа-запросы, не так ли?
1234ru

Хороший, очень ясный ответ. Спасибо!
Александр Сурафель

Ссылка была очень полезной. Спасибо
Рафаэль

Согласно моему опыту, «только» работает, как и ожидалось, на Symbian OS (старые сенсорные телефоны Nokia). Я часто использовал его, потому что эти браузеры действительно плохо поддерживали CSS3, но он все еще мог правильно обрабатывать «только» и «минимальную / максимальную ширину» в медиазапросах.
Питер Кнут

@PeterKnut Почему вы даже поддерживаете такие старые устройства? Искренне любопытно
Прометей

41

Чтобы стиль для многих смартфонов с меньшими экранами, вы могли бы написать:

@media screen and (max-width:480px) {  } 

Чтобы заблокировать старые браузеры от просмотра таблицы стилей телефона iPhone или Android, вы можете написать:

@media only screen and (max-width: 480px;) {  } 

Прочитайте эту статью для получения дополнительной http://webdesign.about.com/od/css3/a/css3-media-queries.htm


3
Я до сих пор не очень ясно об этом. Я тоже обновил свой вопрос. Можете привести пример?
Джитендра Вьяс

4
Что если вы используете подход Mobile First? Итак, сначала у нас есть мобильный CSS, а затем мы используем минимальную ширину для таргетинга на большие сайты. Мы не должны использовать onlyключевое слово в этом контексте, верно?
Ашитака

Этот ответ был очень легко понять! :) Только для того, чтобы старые версии, такие как IE 6 или опера 5 или 6, не загружали данные, которые должны быть представлены для Android, Chrome 30 или IE 10. Отличный ответ sandeep :) заслуживает +1
Afzaal Ахмад Зеешан

16

Ответ от @hybrid довольно информативен, за исключением того, что он не объясняет цели, упомянутой @ashitaka: «Что если вы используете подход Mobile First? Итак, сначала мы используем мобильный CSS, а затем используем минимальную ширину для таргетинга на большие сайты. Мы не должны использовать единственное ключевое слово в этом контексте, верно? "

Здесь нужно добавить, что цель состоит в том, чтобы просто запретить не поддерживающим браузерам использовать этот стиль другого устройства, как если бы он начинался с «экрана», без него он будет заменен на экран, где, как если бы он начинался с «только», стиль будет игнорироваться.

Отвечая на ашитаки рассмотрим этот пример

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

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


1
@media screen and (max-width:480px) {  } 

screenздесь нужно установить размер экрана медиазапроса. Например, максимальная ширина области отображения составляет 480 пикселей. Таким образом, он указывает на экран в отличие от других доступных типов медиа.

@media only screen and (max-width: 480px;) {  } 

only screen здесь используется для предотвращения применения указанных стилей старыми браузерами, которые не поддерживают медиазапросы с медиа функциями.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.