Как сделать адаптивность максимально простой с помощь CSS переменных

Как сделать адаптивность максимально простой с помощь CSS переменных

От автора: для тех, кто не слышал про CSS переменные – это новая функция CSS, которая позволяет использовать всю мощь переменных в стилях без настроек.

По факту, CSS переменные позволяют уйти от старого способа написания стилей:

… в пользу:

Синтаксис может показаться немного странным, но теперь вы можете менять размер шрифта во всем приложении, меняя только переменную —base-font-size.

Как сделать адаптивность максимально простой с помощь CSS переменных

Теперь посмотрим, как эта новая технология упростит ваш жизнь при создании адаптивных сайтов.

Настройка

Мы собираемся сделать адаптивным сайт-портфолио:

Как сделать адаптивность максимально простой с помощь CSS переменных

При просмотре на десктопе он смотрится замечательно. Но как видно на нижнем левом изображении, макет не работает на мобильных устройствах.

Как сделать адаптивность максимально простой с помощь CSS переменных

Как сделать адаптивность максимально простой с помощь CSS переменных

На первом изображении мы немного подправили стили, чтобы макет лучше отображался на мобильных экранах. Что мы сделали:

Перегруппировали сетку так, чтобы ее элементы укладывались вертикально друг на друга, а не отображались в две колонки.

Передвинули весь макет немного вверх

Уменьшили размер шрифтов

Для этого нам необходимо изменить CSS:

В частности, в медиа запрос необходимо внести следующие правки:

Уменьшить размер шрифта р1 до 20px

Уменьшить margin сверху и снизу #navbar до 15px

Уменьшить размер шрифта внутри #navbar до 20px

Уменьшить margin сверху .grid до 15px

Заменить двухколоночный .grid на одноколоночный

Заметка: в приложении, конечно, намного больше CSS, даже в этих селекторах. Однако в рамках урока я убрал все, что мы не меняем в медиа запросе. Весь код можно посмотреть в специальном демо на Scrimba.

Старый способ

Все это можно сделать и без CSS переменных, но тогда придется писать лишний код. Для большей части маркированных списков понадобится свой селектор в медиа запросе:

Новый способ

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

После чего просто используем эти переменные в приложении:

Теперь мы можем просто менять значения переменных внутри медиа запроса:

Получилось намного чище, чем раньше. Вместо всех селекторов мы определили :root.

Мы уменьшили меди запрос с 4 селекторов до 1, с 13 строк до 4.

Это лишь простой пример. Представьте полноценный сайт, где —base-margin контролирует большую часть свободного пространства в приложении. Намного проще поменять значение, чем писать медиа запрос со сложными селекторами.

Подводя итоги, можно сказать, что CSS переменные – определенно, будущее адаптивности. Если хотите изучить эту технологию, рекомендую пройти мой бесплатный курс на Scrimba. Вы вмиг станете мастером CSS переменных 🙂

Автор: Per Harald Borgen

Источник: //medium.freecodecamp.org/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: