Давайте разберем ваши примеры один за другим.
@media (max-width:632px)
Это говорит о том, что для окна с max-width
632px вы хотите применить эти стили. При таком размере вы будете говорить о чем-нибудь меньшем, чем экран рабочего стола в большинстве случаев.
@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
самом деле обрабатывается ключевое слово.
only
ключевое слово будет скрывать таблицы стилей от старых браузеров, смотрите ответ на @hybrid ниже. Он объясняет это очень хорошо.media
атрибутуlink
элемента.screen
таковое, как что-либо перечисленное в других типах носителей.Следующее от Adobe docs .
Спецификация медиа-запросов также предоставляет ключевое слово
only
, которое предназначено для скрытия медиа-запросов от старых браузеров. Молnot
, ключевое слово должно прийти в начале объявления. Например:Браузеры, которые не распознают медиазапросы, ожидают разделенный запятыми список типов медиа, и в спецификации говорится, что они должны усекать каждое значение непосредственно перед первым не алфавитно-цифровым символом, который не является дефисом. Итак, старый браузер должен интерпретировать предыдущий пример так:
Поскольку такого типа носителя не существует, таблица стилей игнорируется. Точно так же старый браузер должен интерпретировать
в виде
Другими словами, он должен применять правила стиля ко всем экранным устройствам, даже если он не знает, что означают медиазапросы.
К сожалению, IE 6–8 не смог правильно реализовать спецификацию.
Вместо применения стилей ко всем экранным устройствам, он полностью игнорирует таблицу стилей.
Несмотря на такое поведение, рекомендуется по-прежнему использовать префикс медиа-запросов только в том случае, если вы хотите скрыть стили от других, менее распространенных браузеров.
Итак, используя
а также
будет иметь тот же эффект в IE6-8: оба препятствуют использованию этих стилей. Они, однако, все еще будут загружены.
Кроме того, в браузерах, которые поддерживают медиазапросы CSS3, обе версии будут загружать стили, если ширина области просмотра больше,
401px
а тип медиа - экран.Я не совсем уверен, для каких браузеров, которые не поддерживают медиазапросы CSS3, потребуется
only
версияв отличие от
чтобы убедиться, что это не интерпретируется как
Это был бы хороший тест для тех, кто имеет доступ к лаборатории устройств.
источник
Чтобы стиль для многих смартфонов с меньшими экранами, вы могли бы написать:
Чтобы заблокировать старые браузеры от просмотра таблицы стилей телефона iPhone или Android, вы можете написать:
Прочитайте эту статью для получения дополнительной http://webdesign.about.com/od/css3/a/css3-media-queries.htm
источник
only
ключевое слово в этом контексте, верно?Ответ от @hybrid довольно информативен, за исключением того, что он не объясняет цели, упомянутой @ashitaka: «Что если вы используете подход Mobile First? Итак, сначала мы используем мобильный CSS, а затем используем минимальную ширину для таргетинга на большие сайты. Мы не должны использовать единственное ключевое слово в этом контексте, верно? "
Здесь нужно добавить, что цель состоит в том, чтобы просто запретить не поддерживающим браузерам использовать этот стиль другого устройства, как если бы он начинался с «экрана», без него он будет заменен на экран, где, как если бы он начинался с «только», стиль будет игнорироваться.
Отвечая на ашитаки рассмотрим этот пример
Если мы не будем использовать «только», он все равно будет работать, так как стиль рабочего стола будет также использоваться для ярких стилей Android, но с ненужными накладными расходами. В этом случае, если браузер не поддерживает, он вернется ко второй таблице стилей, игнорируя первую.
источник
screen
здесь нужно установить размер экрана медиазапроса. Например, максимальная ширина области отображения составляет 480 пикселей. Таким образом, он указывает на экран в отличие от других доступных типов медиа.only screen
здесь используется для предотвращения применения указанных стилей старыми браузерами, которые не поддерживают медиазапросы с медиа функциями.источник