Какой тип носителя мне следует использовать в адаптивном веб-дизайне? - PullRequest
Новая
       13

Какой тип носителя мне следует использовать в адаптивном веб-дизайне?

4 голосов
/ 03 февраля 2012

Я вижу, что некоторые используют "только экран" в медиа-запросах, другие используют "все", другие используют "экран и печать", другие используют "экран" (без "только"), другие не указывают носитель типа.

Я не собираюсь использовать определенный CSS для печати или других носителей. Должен ли я использовать «только экран». Разве я не должен указывать тип носителя?

Какой тип медиа использует большинство людей и почему?

Ответы [ 2 ]

3 голосов
/ 03 февраля 2012

В основном:

  • Либо используйте media="screen" для применения вашей основной таблицы стилей ко всем браузерам, либо просто полностью пропустите атрибут media, если вам не нужна печать

  • Используйте media="print" для применения таблицы стилей печати, если вам нужна печать

  • Если вы хотите, включите ключевое слово onlyтолько для медийных запросов, таких как screen and (max-width: 1000px) для ваших адаптивных стилей (здесь нет правильных, неправильных или стандартных правил)

Ключевое слово only было введено, главным образом, для остановки старыхбраузеры от применения таблиц стилей, предназначенных для других устройств, таких как современные браузеры на смартфонах и планшетах.См. спецификацию медиазапросов .

. Не используйте media="only screen" для основной таблицы стилей.Если вы это сделаете, IE8 и старше полностью проигнорируют вашу основную таблицу стилей, и ваш сайт будет выглядеть нестандартным в этих версиях.

Для некоторого фона: спецификация HTML 4 запрашивает медиа"types" (или media descriptors ), например, так: 

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="resp.css">

Должен быть проанализирован с игнорируемой частью and ..., так что это будет эквивалентно этому: 

<link rel="stylesheet" media="screen" href="resp.css">

Это означает, что он будет применяться в старых браузерах, которые не поддерживают медиазапросы CSS3, но do полностью поддерживают медиа типы CSS2.Это может вызвать нежелательные побочные эффекты, например, мобильную таблицу стилей, применяемую в старых браузерах для настольных компьютеров.

Однако, по моему опыту, этого никогда не происходило;Насколько мне известно, IE7 и IE8 просто воспринимают screen and (max-width: 1000px) как недопустимый медиа-дескриптор и вообще игнорируют эту таблицу стилей.

Но мне нравится быть в безопасности и поставить ключевое слово onlyв медиа-запросах, предназначенных специально для использования в современных браузерах.

Конечно, это правило было изменено в HTML5 для обеспечения совместимости с медиа-запросами в CSS3.Это просто не относится к старым браузерам, выпущенным до начала работы над HTML5.

0 голосов
/ 08 мая 2012

IMO - проще и эффективнее объединить все стили в одну таблицу стилей: 

<link rel=stylesheet href="style.css">

Затем вы можете переопределить по мере увеличения: 

/* put mobile-friendly first (before media queries) */ 

@media screen and (min-width:481px) {
    /* ... */
}

@media screen and (min-width:961px) {
    /* ... */
}

@media print {
    /* print-specific overrides */ 
}

Оформить заказ H5BP и 320 и выше .

Вы можете использовать screen или all.Если вы добавляете такие вещи, как фоновые изображения, которые применяются только к экранам, тогда определенно имеет смысл использовать screen.Для реальных базовых вещей это не имеет большого значения.

...