Адаптивная вёрстка сайта

14 сентября 2021

При адаптивной вёрстке сайт может «подстраиваться» под различные устройства, менять размер и расширение в соответствии с экраном. Адаптивный сайт одинаково хорошо смотрится и на большом мониторе персонального компьютера, и на экранах планшетов и смартфонов.

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

Как создаётся адаптивная вёрстка. При написании кода необходимо использовать «wrapper». Термин «wrapper» переводится как оболочка или обёртка – это промежуточный слой между прикладной программой и интерфейсом программирования приложений, он позволяет адаптировать сайт под разные экраны и браузеры. Если при создании сайт поместить в оболочку, то оболочка будет растягиваться на весь экран, а сам сайт сможет масштабироваться относительно оболочки.

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

Пример адаптивной верстки

Необходимо создать 12 блоков, которые располагаются в 3 ряда. При изменении экрана количество рядов должно увеличиваться и блоки должны перемещаться (рис. 15).

Для начала сделаем стили родителю блоков:

.parent {

display: flex;

flex-wrap: wrap;

width: 95%;

margin: 50px auto;

}

Рис. 15. Пример исходных блоков

Теперь зададим стили самим блокам, не задавая им ширину, но задав отступ в процентах:

.child {

box-sizing: border-box;

height: 100px;

padding: 20px;

margin-bottom: 1.5%;

border: 1px solid green;

}

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

@media (min-width: 1000px) {

.child {

width: calc(100% / 4 - 1.5% * 3 / 4);

}

.child:not(:nth-child(4n)) {

margin-right: 1.5%;

}

}

Напишем стили для трех блоков в ряд:

@media (min-width: 700px) and (max-width: 1000px) {

.child {

width: calc(100% / 3 - 1.5% * 2 / 3);

}

.child:not(:nth-child(3n)) {

margin-right: 1.5%;

}

}

Далее напишем стиль для двух блоков в ряд:

@media (min-width: 400px) and (max-width: 700px) {

.child {

width: calc(100% / 2 - 1.5% * 1 / 2);

}

.child:not(:nth-child(2n)) {

margin-right: 1.5%;

}

}

Один блок в ряд:

@media (max-width: 400px) {

.child {

width: 100%;

}

}

В итоге мы получим блоки, которые адаптируются под размер экрана (рис.16).

Рис. 16. Адаптивное изменение количества блоков