Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

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

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

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

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

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

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

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

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

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

css media queries

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

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

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

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

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

Ключевое слово Девайс
all Стилевые правила применяются ко всем устройствам. Данное значение установлено по умолчанию.
tv Указывает, что стиль применяется к телевизорам.
print Правила устанавливаются принтерам и другим девайсам, связанным с печатью.
handheld Свойства css срабатывают для смартфонов и подобных аппаратов.
screen Отвечает за экран монитора.
braille Указывает, что набор стилей применяется к устройствам, которые используют систему Брайля (система, которая была разработана специально для слепых людей. К сожалению, стоимость таких приборов достаточно высокая).
embossed Используется для принтеров с системой Брайля.
speech Отвечает за речевые системы, синтезаторы, браузеры и программы, воспроизводящие текстовый контент вслух.

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

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

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

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

Color (min-color, max-color)

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

max-color:4


Тогда на синий, красный и зеленый каналы соответственно выделится по 24 бита. Если же вместо этого просто указано 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 наиболее популярными расширениями дисплея считаются:

1366×768
1920×1080
1280×1024
360×640
1024×768

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

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

В зависимости от смены экрана будет меняться и блок <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>

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

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

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


Прочитано: 51 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Александр

    У меня на компьютере уже давно хранятся несколько видео курсов по верстке и ещё есть интенсивы по адаптивной верстке. Думаю, что после прочтения и изучения всех твоих уроков, мне будет намного проще изучать информацию, которая есть у меня. :)

    30.11.2016 в 00:18
    • Роман

      Ок. Удачного изучения. Если будут вопросы, то пиши. Чем смогу помогу.

      А что за уроки, если не секрет?

      30.11.2016 в 22:38
      • Александр

        Роман, уже год или два храню курсы:

        1. Андрей Бернацкий, Андрей Кудлай WordPress-Мастер «гуру уровень» часть 3 Создание адаптивное WordPress темы.

        2. Те же авторы WordPress-Мастер «специалист-уровень» часть 1 «Нарезка и верстка макетов»

        И вот на днях ещё скачал с одного файлообменника курсы, так он закрывается пришлось на комп качать:

        HTML Academy — Базовый HTML и CSS — 2016

        Комплексный курс «Веб-Мастер» — HTML5, CSS3, PHP, MYSQL, SEO

        Ещё у меня несколько есть. Держу их на всякий случай. Всё собираюсь изучать. Некоторые курсы уже удалил. Что скажешь на счёт тех, что я написал? Кстати последние два, они в виде записей вебинаров. :p

        01.12.2016 в 11:29
        • Роман

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

          Знаяю что курсы от специалиста на высоте. Но они подойдут если у тебя куча терпения и ты полный 0. Они разжевывают все подробно: начиная от — что такое сеть, как она работает, что такое браузер, как он работает и т.д. Я о ним азы постигал.

          Еще понятно объясняет Е. Попов в своих курсах. Кто бы что не говорил про него, но для новичка самое то.

          htmlacademy.ru — интерактивные онлайн-курсы, какое-то разнообразие из всего хлама видео курсов и что-то новое. Проверка себя на знания css и html.

          02.12.2016 в 14:26