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

Никита Дубко, разработчик интерфейсов

Терминология

youtube.com/watch?v=srUZ9E4qQlQ

Адаптивный сайт

отображается по-разному на разных размерах устройства;
размеры фиксированные.

Отзывчивый сайт

отображается по-разному на разных размерах устройства;
переходы между состояниями плавные.

Holy Grail Layout

en.wikipedia.org/wiki/Holy_grail_(web_design)

История

1. На таблицах (демо)

<table>
    <tr>
        <td colspan="3" id="header">header</td>
    </tr>
    <tr>
        <td id="left" width="300">Left</td>
        <td id="center">Lorem ipsum...</td>
        <td id="right" width="250">Right</td>
    </tr>
    <tr>
        <td colspan="3" id="footer">footer</td>
    </tr>
</table>

Адаптивность на таблицах?

Нет 😞

Отрисовка во время загрузки 😣

Много лишнего кода 😭

Отдельная версия для мобильных

сервер определяет тип устройства;
пользователя перенаправляет на версию сайта для его устройства.

Мета-тег viewport

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

2. При помощи float (демо)

alistapart.com/article/holygrail

<div class="header">header</div>
<div class="container">
    <div class="center" class="column">
        Lorem ipsum...
    </div>
    <div class="left" class="column">Left</div>
    <div class="right" class="column">Right</div>
</div>
<div class="footer">footer</div>

.container {
    padding-left: 300px;
    padding-right: 250px;
}

.container .column {
    position: relative;
    float: left;
}

.footer {
    clear: both;
}

.center {
    width: 100%;
}

.left {
    width: 300px;
    right: 300px;
    margin-left: -100%;
}

.right {
    width: 250px;
    margin-right: -250px;
}

adaptivewebdesign.info/1st-edition/read/

bootstrapdocs.com/v1.4.0/docs/#grid-system

@media-выражения

developer.mozilla.org/en-US/docs/Web/CSS/@media

.section {
    padding: 3rem 5rem;
}

@media screen and (min-width: 900px) {
    .section {
        padding: 1rem 3rem;
    }
}

Desktop-first

/* Большие экраны и общие стили */

@media (max-width: 979px) {
    /* Десктоп */
}
@media (max-width: 767px) {
    /* Планшет */
}
@media (max-width: 480px) {
    /* Смартфон */
}

Mobile-first

/* Смартфон и общие стили */

@media (min-width: 480px) {
    /* Планшет */
}
@media (min-width: 767px) {
    /* Десктоп */
}
@media (min-width: 979px) {
    /* Большие экраны */
}

gs.statcounter.com/platform-market-share/desktop-mobile-tablet

radar.yandex.ru/device_categories

Практика

демо

Flexbox

A Complete Guide to Flexbox

css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstvam-flexbox-iz-css3.html

Свойства родителя

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

песочница 1, песочница 2

Свойства дочернего элемента

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

песочница 3

<div class="header">header</div>
<div class="center">
    Lorem ipsum...
</div>
<div class="left">
    Left
</div>
<div class="right">
    Right
</div>
<div class="footer">footer</div>

<header class="header">header</header>
<article class="center">
    Lorem ipsum...
</article>
<nav class="left">
    Left
</nav>
<aside class="right">
    Right
</aside>
<footer class="footer">footer</footer>

Практика

демо

body {
    display: flex;
    flex-wrap: wrap;
}

.header {
    width: 100%;
}

.footer {
    width: 100%;
    order: 4;
}

.center {
    flex: 999 999 500px;
    order: 2;
}

.left {
    flex: 1 1 300px;
    order: 1;
}

.right {
    flex: 1 1 250px;
    order: 3;
}

CSS Grid Layout

A Complete Guide to Grid

Grid Container

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

Grid Container

display: grid
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

Grid Container

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

grid-template-columns

grid-template-columns: 40px 50px auto 50px 40px;

grid-template-columns: [first] 40px [line2] 50px [end];

grid-template-columns: repeat(5, 1fr);

grid-template-columns: 3fr minmax(500px, max-content) 2fr;

Grid Container

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

Grid Container

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

Grid Container

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow

<header class="header">header</header>
<article class="center">
    Lorem ipsum...
</article>
<nav class="left">
    Left
</nav>
<aside class="right">
    Right
</aside>
<footer class="footer">footer</footer>

Практика

демо

body {
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: 300px auto 250px;
    grid-template-areas:
        'h h h'
        'l c r'
        'f f f';
}

body {
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: 300px auto 250px;
    grid-template-areas:
        '🎩 🎩 🎩'
        '👈 ✏️ 👉'
        '🦶 🦶 🦶';
}

.header { grid-area: 🎩; }

.center { grid-area: ✏️; }

.left { grid-area: 👈; }

.right { grid-area: 👉; }

.footer { grid-area: 🦶; }

cssgrid.io

CSS Grid Animation

Анимация CSS Grid Layout, что мы имеем?

Что использовать?

для сетки — гриды;
для микросетки — флексы.

Изображения

Элемент picture

<picture>
    <source type="image/webp" media="(min-width: 1150px)"
            srcset="img-desktop@1x.webp 1x, img-desktop@2x.webp 2x">
    <source type="image/webp"
            srcset="img-mobile@1x.webp 1x, img-mobile@2x.webp 2x">
    <source media="(min-width: 1150px)"
            srcset="img-desktop@1x.jpg 1x, img-desktop@2x.jpg 2x">
    <img src="img-mobile@1x.jpg" srcset="img-mobile@2x.jpg 2x"
            alt="Привет, ШРИ!" width="20" height="18">
</picture>

Элемент picture

<picture>
    <source type="image/webp" media="(min-width: 1150px)"
            srcset="img-desktop@1x.webp 1x, img-desktop@2x.webp 2x">
    <source type="image/webp"
            srcset="img-mobile@1x.webp 1x, img-mobile@2x.webp 2x">
    <source media="(min-width: 1150px)"
            srcset="img-desktop@1x.jpg 1x, img-desktop@2x.jpg 2x">
    <img src="img-mobile@1x.jpg" srcset="img-mobile@2x.jpg 2x"
            alt="Привет, ШРИ!" width="20" height="18">
</picture>

Элемент img

<img srcset="img-320w.jpg 320w,
                img-480w.jpg 480w,
                img-800w.jpg 800w"
        sizes="(max-width: 320px) 280px,
               (max-width: 480px) 440px,
               800px"
        src="img-800w.jpg" alt="Привет, ШРИ!">

srcset — задаем каждому размеру свое изображение;
sizes — вычисляем размер, который нужно применить;
выбираем из srcset самое подходящее по размеру изображение.

2009

.yandex {
    background-image: url('img/yandex.jpg');
}

2019

.yandex {
    background-image: url('img/yandex-mobile.jpg');
}

@media (min-width: 1050px) {
    .yandex {
        background-image: url('img/yandex-desktop.jpg');
    }
}

.yandex {
    background-image: url('img/yandex@1x.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi),
        (min-resolution: 2dppx) {
    .yandex {
        background-image: url('img/yandex@2x.jpg');
    }
}

Размеры

em, rem

em — относительная единица длины, равная размеру текущего шрифта;
rem — относительная единица длины, равная размеру текущего шрифта корневого элемента.

<html>
<body>
    <div class="content">
        <p>Привет, ШРИ!</p>
    </div>
</body>
</html>

html     { font-size: 10px; }
.content { font-size: 20px; }
p        { font-size: 1em; } /* сколько в пикселях? */

<html>
<body>
    <div class="content">
        <p>Привет, ШРИ!</p>
    </div>
</body>
</html>

html     { font-size: 10px; }
.content { font-size: 20px; }
p        { font-size: 1rem; } /* сколько в пикселях? */

<html>
<body>
    <div class="content">
        <p>Привет, ШРИ!</p>
    </div>
</body>
</html>

html     { font-size: 10px; }
.content { font-size: 1rem; }
p        { font-size: 2em; } /* сколько в пикселях? */

vw, vh, vmin, vmax

vh — 1% высоты окна браузера
vw — 1% ширины окна браузера
vmin — 1% меньшего размера окна браузера
vmax — 1% большего размера окна браузера

calc

width: calc(100% / 3 - 2 * 1em - 2 * 1px);

CSS-шлюзы

h1 { font-size: 1.5rem; }
p { font-size: .9375rem; }

@media (min-width: 320px) {
    h1 { font-size: calc( 1.5rem + 2.5vw - 8px ); }
    p { font-size: calc( .9375rem + .46875vw - 1.5px ); }
}
@media (min-width: 960px) {
    h1 { font-size: calc(1.5rem + 16px); }
    p { font-size: calc( .9375rem + 3px ); }
}

css-live.ru/articles/matematika-css-shlyuzov.html

Итоги

Советы

Делайте отзывчивую mobile-first вёрстку 📱
Думайте про пользователей всех устройств ⌚️
Flexbox — можно и нужно ✅
Grid — можно, но осторожно ⚠️
Правильно работайте с изображениями 🌅
Используйте CSS по максимуму 🤘

Bootstrap жив?

Жив, но нужен ли он вам? 🤷‍♂️

Материалы

Адаптивная вёрстка — Дмитрий Душкин, ШРИ
Хватит врать про Grid Layout — Серёжа Попов
Показываем картинки пользователю — Никита Дубко

Спасибо за внимание!

Никита Дубко

разработчик интерфейсов

mefody@yandex-team.ru
MeFoDy