Медиа запросы (media query)
В современном мире, сайты можно просматривать не только через обычные настольные компьютеры и ноутбуки, но и с помощью — планшетов, смартфонов, нетбуков, сотовых телефонов, которые имеют более низкое разрешение экрана.
Обычные сайты с фиксированными размерами, не могут хорошо просматриваться на всех устройствах одновременно:
1) для большинства мобильных устройств стандартная ширина сайта в 1000 пикселей будет больше размера экрана, так как есть сотовые телефоны с размером экрана в 200 пикселей.
2) а если сделать сайт с шириной в 200 пикселей, то такой сайт будет практический не виден на обычных настольных компьютерах и ноутбуках.
Что делать?
Лучшим выходом из этой дилеммы будет применение медиа запросов (media query).
Что такое медиа запросы (media query)?
Для начала перейдите по ссылке медиа запросы и попробуйте изменить размер экрана браузера от 400 пикселей до 800 пикселей (конечно если есть такая возможность).
В этом примере цвет бокса будет менять в зависимости от размера экрана. Это осуществляется с помощью медиа запросов.
Код этого примера довольно простой!
index.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div id='box'></div>
</body>
</html>
style.css:
#box {
width: 100%;
height: 50px;
background: green;
}
@media only screen and (max-width:700px)
{
#box {
background: yellow;
}
}
@media only screen and (max-width:500px)
{
#box {
background: black;
}
}
Синтаксис медиа запросов
Синтаксис медиа запросов довольно простой, запись:
@media only screen and (max-width:700px)
{
#box {
background: yellow;
}
}
означает что для всех размеров экрана меньше 700 пикселей, бокс с div id="box" будет иметь желтый фон.
Отметим что вместо background: yellow; можно поставить любые стилевые стили для div id="box", например сделать высоту бокса равную 100 пикселей: height: 100px;
Запись:
@media only screen and (max-width:500px)
{
#box {
background: black;
}
}
делает фон бокса, для размера экранов менее 500 пикселей, черного цвета.
Замечание о приоритетах медиа запросов
В этом примере есть две друг другу противоречащие записи, в @media only screen and (max-width:700px) цвет бокса установили желтым, а в @media only screen and (max-width:500px) цвет бокса черный.
Для размеров экрана менее 500 пикселей, например для 400 пикселей должны действовать оба стиля, но если есть стили противоречащие друг другу, то стиль с меньшим max-width будет более приоритетным, в данном случае это @media only screen and (max-width:500px).
Любые размеры экрана
В записях типа @media only screen and (max-width:500px) можно вместо 500 ставить любые значения. Также возможно давать внутри медиа запросов стили не только для одного div, но и для нескольких:
@media only screen and (max-width:500px)
{
#one {
background: black;
}
#two {
background: black;
}
...
}