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

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

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

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

… в пользу:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Настройка

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Уменьшить 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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree