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

1.

УРОК №24
Адаптивная
вёрстка

2.

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

3.

Адаптивная верстка
Под адаптивной вёрсткой понимают такой способ создания страниц,
когда для разных устройств применяются разные стили.
Страница адаптируется под устройства, отсюда и название.
Адаптивная верстка является современным стандартом разработки
страницы, из-за распространенности мобильных устройств
(смартфонов, планшетов, ноутбуков с нестандартными экранами).

4.

Медиа-запросы
Медиа-запросы в CSS применяются для того, чтобы определить,
в каком именно типе устройств будут применяться стили.
Типы устройств:
aural, braille, handheld, print, projection, screen, tty, tv
Для установки медиа-запросы используется команда @media

5.

Узконаправленные @media
Узконаправленные запросы позволяют определить стили только
для определенных параметров. Параметры обычно
записываются в скобках.
Чаще всего используются диапазоны, с префиксами max- и min@media (max-width: 1500px) { ... }
Стили будут применяться для устройств с view-port с
максимальным значением 1500px

6.

Медиа-запросы для адаптивной верстки
Для адаптивной верстки используется медиа-запрос screen с
указанием размеров.
Для того, чтобы работали несколько медиа-запросов используется
команда and
@media screen and (max-width: 1400px)

7.

Мета-тег viewport
По умолчанию мобильные браузеры сканируют страницу таким
образом, чтобы вся страница попадала целиком, тем самым
игнорируя реальные размеры устройства.
Для того, чтобы управлять этим поведением используют метатег viewport
<meta name="viewport" content="width=device-width, initialscale=1.0">

8.

Принцип mobile first
Данный принцип рекомендует начинать прописывать стили
сначала для устройств с наименьшим размером экрана по
нарастающей.

9.

Типовые размеры экранов
@media screen and (max-width: 320px) {}
@media screen and (min-width: 320px) and (max-width: 480px) {}
@media screen and (min-width: 480px) and (max-width: 768px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
@media screen and (min-width: 1024px) {}

10.

Конец
Давайте подведем итоги урока!
Чему мы научились? Что мы использовали?
К чему мы приш ли?