Архив метки: Адаптивный дизайн

Главная / Адаптивный дизайн
2 Поста

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

Я нашел этот довольно популярный график в интернете, источником указывается Morgan Stanley Research. Не знаю насколько точны эти цифры, но общая суть давно ясна: мобильные браузеры догнали и перегнали по популярности десктопные.

Судя по графику, это произошло примерно в 2013-2014 году, и с этого момента уже прошло немного времени.

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

Мобильных девайсов много. Какие из них поддерживать?

Все из них. Иначе вы можете потерять часть своих пользователей.

Что такое отзывчивый сайт?

Это сайт, который адаптируется к среде просмотра.

Часто в рунете используют термины адаптивный дизайн или адаптивный сайт, но технически это не совсем одно и то же, так что в этой статье для точности я использую термин «отзывчивый дизайн».

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

На ней приведена перефразированная (или, возможно, оригинальная) цитата известного эксперта по боевым искусствам Брюса Ли.

Вы помещаете воду в чашку и она становится чашкой. Вы помещаете воду в бутылку и она становится бутылкой. Вы помещаете ее в чайник, и она становится чайником.

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

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

Чаще всего (но не всегда) это означает, что сайт будет адаптироваться по ширине девайса.

Альтернативы отзывчивому дизайну

Есть ли альтернативы принципам отзывчивого дизайна? Вообще, они есть.

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

К примеру, может иметься обычная версия сайта по адресу example.com, а мобильная по адресу m.example.com.

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

Но такой подход может иметь некоторые недостатки.

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

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

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

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

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

Не забывайте, что 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 (медиа-свойство) логический оператор (медиа-свойство)

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

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