Яка різниця між "екраном" та "єдиним екраном" у медіа-запитах?

У чому різниця між запитами 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)

Цей варіант говорить про те, що для пристрою з a screenі вікном з max-width632px застосувати стиль. Це майже ідентично вищесказаному, за винятком того, що ви вказуєте screen, на відміну від інших доступних типів засобів масової інформації, найбільш поширених інших print.

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

Ось цитата прямо з W3C, щоб пояснити цю.

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

Оскільки не існує такого типу медіа, як "тільки", старі браузери повинні ігнорувати таблицю стилів.

Ось посилання на цю цитату, яка показана в прикладі 9 на цій сторінці.

Сподіваємось, це проливає трохи світла на медіа-запити.

Редагувати:

Не забудьте перевірити відмінну відповідь @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 "Що робити, якщо ви використовуєте мобільний перший підхід? Отже, ми спочатку маємо мобільний 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)" />

Якщо ми не використовуємо "тільки", він все одно буде працювати, оскільки стиль робочого столу також буде використовуватись вражаючі стилі андроїд, але із зайвими накладними витратами. У такому випадку, якщо браузер не підтримує, він повернеться до другого аркуша стилів, ігноруючи перший.

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

screenтут потрібно встановити розмір екрана медіа-запиту. Наприклад, максимальна ширина області відображення - 480 пікселів. Таким чином, це вказує екран на відміну від інших доступних типів носіїв.

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

only screen тут використовується для запобігання застосуванню вказаних стилів старими браузерами, які не підтримують медіа-запити з функціями медіа.