Несколько примеров работы с 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/