Адаптивная верстка сайта или основы создания интернет ресурсов под любые разрешения экрана

Приветствую всех читателей текущей публикации и конечно же моих дорогих подписчиков. Вследствие того, что технологии развиваются с бешенной скоростью, уже сегодня мы пользуемся скоростным интернетом, не задумываясь, и ежедневно просматриваем сотни сайтов с различных устройств: персональных компьютеров, планшетов, ноутбуков и даже смартфонов. Именно поэтому любому веб-разработчику просто необходимо знать, что такое адаптивная верстка сайта.

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

«Сделайте мне сайт, да чтоб универсальный!»

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

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

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

Хочу отметить главную особенность такого типа верстки от других! При использовании описываемого механизма адаптация элементов и блоков происходит рывками от одного заданного размера окна к другому.

Базовый инструментарий

Так как данная статья рассчитана на новичков, я расскажу про основные инструменты адаптивной верстки, которые входят в Media Queries.

Что это такое? Это специальное правило, с помощью которого указывается для каких расширений экрана или устройств будут применяться те или иные стилевые свойства. Выглядит оно следующим образом:

@media, а сам запрос пишется так:

@media устройство/расширение {…}

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

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

С устройствами отображения разобрались, а теперь перейдем к расширениям. Для этого в языке были предусмотрены специальные функции. Так, есть функция height, которая отвечает за высоту экрана, и функция width, которая определяет ширину.

@media (max-width: 1950px) and (max-height: 1100px) {…}

Однако это всего лишь 2 инструмента для задания размеров окна, а их существует намного больше. К тому же заметьте, что перед функциями стоит приставка max- . Ее и еще одну приставку min- достаточно часто используют для указания возможного максимального и минимального значения параметров. Давайте рассмотрим каждую функцию отдельно.

Color (min-color, max-color)

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

max-color:4

Тогда на синий, красный и зеленый каналы соответственно выделится по 2⁴ бита. Если же вместо этого просто указано color, то запрос работает только с цветными мониторами.

Device-height (можно использовать min- и max-)

Такая функция определяет всю доступную высоту окна и работает на всех типах девайсов, кроме речевых.

Device-width (можно добавлять min- и max-)

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

Orientation

Можно указывать два значения: landscape и portrait, которые отвечают за альбомный (ширина экрана преобладает над высотой) и портретный (высота преобладает над шириной) режим соответственно. Выглядит запрос вот так:

@media orientation: landscape

Grid

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

Scan

Поддерживает два параметра: interlace и progressive. Отвечает за тип развертки изображения на телевизорах. В случае установки первого значения interlace, которое означает чересстрочный тип развертывания, будет происходить сокращение данных при передаче за счет отработки вначале нечетных кадровых строк, а после четных. Во втором случае при выборе progressive (прогрессивного типа развертывания) кадр передается сразу целиком.

Логические операторы

Помимо функций используются также логические операторы and, only и not.

• And объединяет несколько условий,
• only используется в старых версиях браузера, в которых еще не функционируют медиа-запросы,
• not отрицает указанный параметр.

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

А какие задавать размерности?

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

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

Итак, по статистике за август 2016 наиболее популярными расширениями дисплея считаются:

Супертехника моментальной адаптации

Как вы уже догадались, адаптивная верстка очень простая по своей природе. Однако грош цена теоретическим знаниям, если вы не сможете это использовать на практике. Так что пришло время реализовать простой программный код.

В зависимости от смены экрана будет меняться и блок <div> на странице.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>article</title>
<style>
@media (max-width: 1930px) and (max-height: 1100px)
 {
    div {
      width: 950px;
      max-width: 85%;
      background: blue;
      height: 150px;
      margin-left: 15%;
      margin-right: 15%;
   }
  }
@media  (max-width: 1030px) and (max-height: 770px)
  {
    div {
      width: 620px;
      max-width: 85%;
      background: red;
      height: 150px;
      margin-left: 15%;
      margin-right: 15%;
   }
  }
</style>
 </head> 
 <body>
  <div></div>
 </body> 
</html>

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

На этой ноте я предлагаю закончить урок. Если вам понравилась статья, то обязательно делитесь ссылкой на нее с друзьями и коллегами, а также подписывайтесь на обновления моего блога. Желаю удачи в изучении адаптивной верстки! Пока-пока!

С уважением, Роман Чуешов