Архив метки: медиа-запросы

Главная / медиа-запросы
2 Поста

Медиа-запросы позволяют группировать стили вместе и задавать их для разных девайсов на основе определенных критериев.

К примеру, вы можете определить устройство по его ширине, высоте или ориентации (горизонтальной, портретной).

Конечно, одним из самых очевидных различий между просмотром сайта на десктопе и телефоне будет их размер экрана.

Не забывайте, что CSS имеет силу создавать очень разные макеты веб-страниц на основе одного и того же HTML. Помните csszengarden.com?

Так что, самый частый способ настройки стилей и макета вашей страницы — это задать разные стили для разных размеров экранов пользователей.

Вот почему очень важно изучить, по крайней мере, основы использования медиа-запросов.

Без них адаптивный дизайн, о котором мы скоро поговорим, не был бы возможным.

Поэтому давайте рассмотрим основной синтаксис медиа-запросов.


@media (max-width: 767px) {
  p {
    color: blue;
  }
}

Медиа-запрос начинается с @media, затем идет медиа-свойство и фигурные скобки.

Внутри фигурных скобок находятся стили. Это как таблица стилей внутри таблицы стилей.

Если медиа-свойство разрешается как true, стили внутри фигурных скобок применяются.

Когда пишете медиа-запрос, не забудьте закрыть скобку для самого запроса и для каждого стиля.

Основные медиа-свойства


@media (max-width: 800px) {...}


@media (min-width: 800px) {...}


@media (orientation: portrait) {...}


@media (screen) {...}


@media (print) {...}

Вы можете определять устройства по ширине, высоте, по ориентации, типу экрана и т.д.

Но наиболее частым применением является таргетирование по ширине.

Основные логические операторы медиа-запросов

Медиа-запросы могут комбинироваться с помощью логических операторов.

Одним из наиболее популярных логических операторов является and.

В качестве примера, код ниже определяет диапазон ширины.


@media (min-width: 768px) and (max-width: 991px) {...}

Другим способом комбинации медиа-запросов является разделение их запятой. Это, по сути, эквивалент оператора OR.


@media (max-width: 767px) , (min-width: 992px) {...}

На практике, при создании адаптивного дизайна или адаптивного макета самым частым оператором будет and.

Структура таблицы стилей с медиа-запросами

Я хотел бы показать вам как структурировать таблицу стилей с медиа-запросами в ней.

Чаще всего, у вас будет несколько подобных медиа-запросов, но почти наверняка у вас будут какие-то базовые стили для начала.


p { color: blue; } /* базовые стили */

...

@media (min-width: 1200px) {
...
}

@media (min-width: 992px) and (max-width: 1199px) {
...
}

...

Базовые стили будут применяться везде, без разницы на каком устройстве вы просматриваете сайт.

Затем вы пишете стили для определенных размеров экрана, например изменяя для них некоторые базовые стили или добавляя новые.

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

В примере выше первый медиа-запрос имеет минимальную ширину в 1200 пикселей, а во втором медиа-запросе максимальная ширина указана в 1199 px.

Если бы во втором запросе было включено 1200, то применялись бы оба из них, и скорее всего это было бы не очень хорошо.

Поэтому когда вы структурируете медиа-запросы, у вас должны быть очень четкие, раздельные границы.

Примеры

Давайте взглянем на пример.

Здесь у нас снова простая структура HTML: заголовок два параграфа.

Параграфы имеют свои id. Один из них будет большим, а другой маленьким.

Заголовок мы не будем изменять, он просто для придания приличного вида странице.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Медиа-запросы</title>
<style>
/********** Базовые стили **********/
h1 {
  margin-bottom: 15px;
}
p {
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
  width: 300px;
  height: 300px;
}
#p2 {
  background-color: #DEB887;
  width: 50px;
  height: 50px;
}

/********** Только большие девайсы **********/

/********** Только средние девайсы **********/

</style>
</head>
<body>
<h1>Медиа-запросы</h1>

<p id="p1"></p>
<p id="p2"></p>

</body>
</html>

Давайте посмотрим на это в браузере.

При изменении ширины браузера ничего не меняется. Если мы делаем его уже, наши параграфы остаются того же размера.

А теперь давайте посмотрим что мы можем сделать с помощью медиа-запросов.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Медиа-запросы</title>
<style>
/********** Базовые стили **********/
h1 {
  margin-bottom: 15px;
}
p {
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
  width: 300px;
  height: 300px;
}
#p2 {
  background-color: #DEB887;
  width: 50px;
  height: 50px;
}

/********** Только большие девайсы **********/
@media (min-width: 1200px) {
  #p1 {
    width: 80%;
  }
  #p2 {
    width: 150px;
    height: 150px;
  }
}

/********** Только средние девайсы **********/
@media (min-width: 992px) and (max-width: 1199px) {
  #p1 {
    width: 50%;
  }
  #p2 {
    width: 100px;
    height: 100px;
  }
  body {
    background-color: blue;
  }
}
</style>
</head>
<body>
<h1>Медиа-запросы</h1>

<p id="p1"></p>
<p id="p2"></p>

</body>
</html>

Откроем в браузере.

Так как мой браузер шире 1200 px, применяются стили указанные для больших девайсов. Ширина первого параграфа равняется 80% от ширины окна, а второй параграф занимает размер 150×150 пикселей.

Теперь попробуем сделать окно браузера немного уже.

Теперь в диапазоне 992‒1199 px применяются новые стили: синий фон, первый параграф шириной 50%, второй параграф 100×100 пикселей.

И, наконец, попробуем сделать его уже 992 px.

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

Кстати, чтобы узнать точную ширину браузера, вы можете открыть инструменты разработчика (Ctrl + Shift + I). Очень полезная вещь, кстати.

Когда вы будете изменять ширину окна в этом режиме, вы увидите его размер в правом верхнем углу.

Кроме того, там есть иконка с телефоном.

Если вы кликнете на нее, вы можете просмотреть сайт с разными размерами экрана. Можно выбрать какой-то девайс типа Galaxy S5 или iPhone 6, либо выбирать любой размер самостоятельно.

Вообще, инструменты разработчика в Chrome невероятно полезны, в том числе если вы хотите увидеть и настроить дизайн адаптивного сайта.

Вкратце

Мы поговорили о базовом синтаксисе медиа-запроса:

  • @media (медиа-свойство)
  • @media (медиа-свойство) логический оператор (медиа-свойство)

Не забывайте не перекрывать граничные точки других запросов, даже на один пиксель.

Обычно вы предоставляете базовые стили. Затем вы меняете или добавляете к ним стили для каждого медиа-запроса.

В прошлом году и в начале этого года я сделал несколько переводов спецификаций от W3C.

Итак,

HTML Canvas 2D Context:

http://topolyan.com/w3c/html_canvas_2d_context_ru.html

Медиа-запросы:

http://topolyan.com/w3c/css3-mediaqueries-ru.html

Атрибуты CSS Style:

http://topolyan.com/w3c/css-style-attributes-ru.html

Selectors API Level 1:

http://topolyan.com/w3c/selectors-api-ru.html

W3C DOM4:

http://topolyan.com/w3c/w3c-dom4-ru.html

Также есть перевод «Библиотечные связанные данные», который я делал совместно с другим человеком:
http://k-topolyan.github.io/library-linked-data/