Практически любой сайт (или веб-приложение) проектируется как для компьютера, так и для мобильного телефона. На сегодняшний день мобильный трафик несколько обходит трафик персональных компьютеров, что означает, что нашей задачей, как разработчиков интерфейсов, является адаптация интерфейса как под экраны компьютеров, так и под экраны телевизоров и мобильных телефонов.
CSS содержит специальные правила, которые могут включаться в зависимости от разрешения экрана пользователя. Здесь мы рассмотрим лишь базовые примеры, но настоятельно рекомендую углубиться в эту тему.
Существует два подхода к вёрстке: desktop-first и mobile-first. Когда мы говорим о desktop-first, это означает, что сайт изначально проектируется под большой экран, а далее видоизменяется к меньшим разрешениям, подключая дополнительные правила. При использовании подхода mobile-first, сайт проектируется под экраны мобильных телефонов, а затем, если разрешение экрана позволяет, подключает дополнительные правила расположения блоков на странице, чтобы сайт перестраивался под большие экраны. Общепринятым стандартом является использование подхода mobile-first. Дело в том, что мобильные устройства считаются более слабыми, поэтому мы можем сэкономить их вычислительный ресурс, не давая включать правила для больших экранов. Пойдём от обратного. Представим, что мы используем подход desktop-first. Тогда, при открытии сайта с телефона, браузер сначала рассчитает все правила для больших экранов, затем поймет, что разрешение экрана маленькое и включит еще слой дополнительных правил. Именно в этом месте у нас и произойдет экономия. Пусть устройства с большими экранами подключают дополнительные правила, ведь почти всегда эти устройства имеют большую вычислительную мощность.
Для задания правила используется ключевое слово @media, где указывается, например, минимальная (для подхода mobile-first) ширина экрана.
Рассмотрим пример:
@media(min-width: 720px) {
...
}
Здесь мы видим, что если разрешение экрана больше 720 точек, мы включим дополнительные CSS-правила, позволяющие иначе расположить блоки на странице. Внутри фигурных скобок мы можем писать обычный CSS-код.
Разберём задачу. Пусть нам необходимо расположить 6 прямоугольных блоков на странице таким образом, чтобы на экране мобильного телефона они располагались друг под другом, на экране планшета мы видели по два блока на строку, а на экране компьютера — по три блока на строку.
Используем подход mobile-first. Опишем изначальный HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
И CSS:
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
width: 100%;
float: left;
}
Теперь сделаем так, чтобы на планшетах в одной строке было два блока. Сделаем предположение, что планшеты - это устройства с экранами более 720 точек в ширину.
@media(min-width: 720px) {
li {
width: 50%;
}
}
И сделаем ещё одно правило для крупных устройств:
@media(min-width: 1200px) {
li {
width: 33%;
}
}
Таким образом мы реализовали отзывчивый список, который подстраивается под любое разрешение экранов. Проверить его работы можно здесь: https://codepen.io/artik-man/pen/oNgVqXp
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues