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

В чем разница между 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)

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

@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самом деле обрабатывается ключевое слово.

Следующее от 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"

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

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

@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

Ответ от @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, но с ненужными накладными расходами. В этом случае, если браузер не поддерживает, он вернется ко второй таблице стилей, игнорируя первую.

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

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

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

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