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

Ответ 1

Разделите свои примеры один за другим.

@media (max-width:632px)

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

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

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

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

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

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

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

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

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

EDIT:

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

Ответ 2

Ниже приведено Документы Adobe.

В спецификации медиа-запросов также содержится ключевое слово 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

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

@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

Ответ 4

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

Ответ 5

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

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

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

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