В прошлом для создания макетов, основанных на ширине браузера пользователя, нам приходилось использовать JavaScript — возможно, в сочетании с языком на стороне сервера. К счастью, теперь этот процесс становится намного проще благодаря медиа-запросам CSS.
Подпишитесь на нашу страницу YouTube, чтобы посмотреть все видеоуроки!
Предпочитаете смотреть это видео на Screenr ?
Способ 1: в вашей таблице стилей
|
1
2
3
|
@media screen and (min-width : 1200px) {
/* let’s do somethin’ */
}
|
Способ 2: импорт из вашей таблицы стилей
|
1
|
@import url( small.css ) screen and ( min-width: 1200px );
|
Обратите внимание, что вы также можете добавлять правила сложения, применяя запятую — так же, как при использовании нескольких селекторов.
Способ 3: ссылка на таблицу стилей
|
1
|
<link rel=»stylesheet» media=»screen and (min-width: 1200px)» href=»small.css» />
|
Способ 4: нацеливание на iPhone
|
1
|
<link rel=»stylesheet» media=»only screen and (max-device-width: 480px)» href=»mobile.css» />
|
Интересное замечание, после небольшого исследования в Интернете, заключается в том, что, несмотря на то, что iPhone 4 имеет разрешение 640×960, он по-прежнему выбирает mobile.css , упомянутый в приведенном выше коде. Как странно? Если у вас есть дополнительная информация об этом, пожалуйста, оставьте комментарий для остальных из нас!
Браузеры, которые поддерживают CSS Media Queries
- Firefox 3.5+
- Opera 9.5+
- Safari 3+
- Хром
- Internet Explorer 9+
Обратите внимание, что Internet Explorer 8 и ниже не поддерживает медиазапросы CSS. В этих случаях вы должны использовать запасной вариант JavaScript.