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

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

@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.

Ниже приведено Документы 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"

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

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

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

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

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

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