Чтобы не делать отдельные версии сайта для мобильных, планшетов и десктопов, используют адаптивный дизайн. С ним одни и те же страницы адаптируются к любой ширине окна браузера: от мобильных до экранов умных телевизоров.
Чтобы сделать страницы адаптивными, используют три техники: гибкую сетку, гибкие изображения и медиа‑запросы.
Гибкая сетка
Основная идея — не использовать в сетке фиксированные значения в пикселях. Вместо этого стоит опираться на относительные единицы измерения (например проценты) и подстраивать отступы, минимальные и максимальные размеры блоков так, чтобы осмысленно и аккуратно заполнять всё доступное пространство.
Адаптируем макет с колонкой текста шириной в 400 пикселей:
Было
<style>
article {
box-sizing: border-box;
width: 400px;
/*
* Задаём внутренние отступы:
* 8 пикселей сверху и слева,
* 16 пикселей справа,
* 24 пикселя снизу.
*/
padding: 8px 16px 24px 8px;
}
</style>
<article>
<p>
Я великий комбинатор, идейный борец
за денежные знаки.
</p>
<p>
Кроме того, я знаю четыреста сравнительно
честных способа отъёма денег.
</p>
<p>
В городе Арбатове выдал себя за сына
лейтенанта Шмидта и получил от председателя
горисполкома небольшую материальную помощь.
</p>
</article>
Стало
<style>
article {
box-sizing: border-box;
/*
* Меняем фиксированную ширину
* на ограниченную:
* если экран меньше 400 пикселей,
* элемент займёт всю доступную ширину;
* если больше 400 — ровно 400 пикселей.
*/
max-width: 400px;
/*
* Задаём внутренние отступы
* пропорционально ширине элемента.
* Чем уже экран — тем меньше отступы.
*/
padding: 2% 4% 6% 2%;
}
</style>
<article>
<p>
Я великий комбинатор, идейный борец
за денежные знаки.
</p>
<p>
Кроме того, я знаю четыреста сравнительно
честных способа отъёма денег.
</p>
<p>
В городе Арбатове выдал себя за сына
лейтенанта Шмидта и получил от председателя
горисполкома небольшую материальную помощь.
</p>
</article>
Гибкие изображения
Чтобы картинки растягивались на всю ширину, их делают «резиновыми»:
img {
/*
* Делаем изображения блочными элементами.
*/
display: block;
/*
* Задаём максимальную ширину в 100%.
*/
max-width: 100%;
height: auto;
}
Чтобы при растяжении картинки выглядели хорошо, используют СВГ (если возможно) или картинки с двойным‑тройным разрешением.
Последний способ не экономит трафик, поэтому ему на замену придумали атрибут srcset. С его помощью можно подсказать браузеру, какую версию картинки загружать: для узкого экрана — облегчённую версию для мобильных, для широкого десктопа — картинку в двойном размере. Но это — тема для отдельного совета.
Медиа‑запросы
С помощью медиа‑запросов перестраивают страницу под разную ширину экрана. Например, прячут ненужное, перестраивают колонки в одну под другой, меняют кегль и интерлиньяж на узких экранах.
Есть два подхода к таким перестроениям: «сначала десктопы» и «сначала мобильные». В первом случае сайт верстают для десктопов, а затем добавляют стилей, улучшающих его отображение на остальных экранах. Этот же подход используют в том случае, когда сайт уже свёрстан и нужна мобильная версия.
Адаптируем этажи портфолио из совета о каталогах и выдаче:
<style>
body {
/* Задаём поля странице в 6% */
padding: 3% 6%;
}
/*
* @media — медиа-запрос,
* screen and (...) — условие,
* при котором стили внутри медиа-запроса
* начнуть работать.
*
* В данном случае у body поменяются поля,
* когда ширина окна станет меньше 768 пикселей.
*/
@media screen and (max-width: 768px) {
body {
padding: 1% 2%;
}
}
.row {
/* .row — флекс-контейнер, этаж портфолио. */
display: flex;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.row {
/*
* На узких экранах переносим не поместившиеся
* проекты на следующую строку.
*/
flex-wrap: wrap;
}
}
.project {
/*
* .project — флекс-элемент, карточка проекта.
* Будет занимать в два раза больше места,
* чем описание проекта.
*/
flex: 2;
padding-right: 10px;
}
.project-caption {
/* .project-caption — описание проекта. */
flex: 1;
padding-right: 10px;
}
.project:last-child,
.project-caption:last-child {
/*
* У последней подписи или проекта
* убираем правый отступ.
*/
padding-right: 0;
}
/*
* На узких экранах растягиваем проекты
* и подписи на всю ширину
* окна и перенастраиваем отступы.
*/
@media screen and (max-width: 768px) {
.project,
.project-caption {
min-width: 100%;
padding: 0;
margin-bottom: 10px;
}
.project:last-child,
.project-caption:last-child {
margin-bottom: 0;
}
/*
* Перемещаем подпись наверх.
*/
.project-caption:last-child {
order: -1;
margin-bottom: 10px;
}
}
</style>
<div class="row">
<div class="project">
<div class="project-image">
<img
src="https://unsplash.it/1000/500"
width="1000"
height="500">
</div>
</div>
</div>
<div class="row">
<div class="project">
<div class="project-image">
<img
src="https://unsplash.it/800/800"
width="800"
height="800">
</div>
</div>
<div class="project">
<div class="project-image">
<img
src="https://unsplash.it/850/850"
width="850"
height="850">
</div>
</div>
<div class="project-caption">
<p>
Практическое руководство для менеджеров
и стартаперов
</p>
</div>
</div>
В подходе «сначала мобильные» начинают с мобильной версии и улучшают её с увеличением доступной ширины экрана.
Адаптируем пост в блоге:
<style>
body {
/*
* Задаём поля странице.
*/
padding: 1% 2% 3% 1%;
}
/*
* У body увеличатся отступы, когда ширина
* окна станет больше 768 пикселей.
*/
@media screen and (min-width: 768px) {
body {
padding: 3% 6% 9% 3%;
}
}
body {
font-family: Georgia, serif;
font-size: 16px;
line-height: 22px;
}
h3 {
font-family: Helvetica Neue, Arial, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 22px;
margin: 0 0 .05em 0;
}
p {
margin: 0 0 .88em 0;
}
/*
* На экранах с шириной
* более 960 пикселей,
* ограничиваем максимальную ширину
* текста, ставим его по центру
* и увеличиваем кегль.
*/
@media screen and (min-width: 960px) {
article {
max-width: 840px;
margin: 0 auto;
}
h3,
p {
font-size: 20px;
line-height: 27px;
}
}
</style>
<article>
<h3>Конец «Вороньей слободки»</h3>
<p>...</p>
<p>...</p>
</article>
Что дальше
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.