Несколько примеров работы с Media queries

Несколько примеров работы с Media queries

Работа с медиазапросами сама по себе очень интересна и полезна, но к сожалению примеры работы приходится собирать буквально по крупицам. Вот я и решил восполнит данный пробел, написав маленькую статью с примерами в виде сниппетов.


@media screen and (max-width: 600px) {
.bg {background: #eee;
}
}

Данный код будет использован, если видимая область экрана меньше 600px.

@media screen and (min-width: 800px) {
.bg {background: #ссс;
}
}

Данный код будет использован, если видимая область экрана больше 800px.

@media screen and (min-width: 320px) and (max-width: 480px) {
.bg {background: #999;
}
}

Данный код будет использован, если видимая область экрана лежит в диапазоне от 320px до 480px.

@media screen and (max-device-width: 480px) {
.bg {background: #000;
}
}

Данный код будет использован, если фактическая ширина экрана равна 480px. Заметьте, фактическая ширина экрана у устройства, а в примерах выше мы рассматривали видимую область экрана.

И в качестве заключения, я приведу примеры определения ориентации устройства при помощи медиазапросов - портретное или альбомное:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Более подробно на английском: http://cloudfour.com/ipad-css/


sbird    В копилку    1069

Комментарии отсутствуют

Добавление комментариев доступно только зарегистрированным пользователям