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

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

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

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

h1 {
  font-size: 30px;
}
navbar > a {
  font-size: 30px;
}

… в пользу:

:root {
  --base-font-size: 30px;
}
h1 {
  font-size: var(--base-font-size);
}
navbar > a {
  font-size: var(--base-font-size);
}

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

Настройка

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

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

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

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

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

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

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

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

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

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

h1 {
  font-size: 30px;
}
#navbar {
  margin: 30px 0;
}
#navbar a {
  font-size: 30px;
}
.grid {
  margin: 30px 0;
  grid-template-columns: 200px 200px;
}

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

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

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

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

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

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

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

@media all and (max-width: 450px) {
 
  navbar {
 margin: 15px 0;
  }
 
  navbar a {
 font-size: 20px;
  }
 
  h1 {
 font-size: 20px;
  }
  .grid {
 margin: 15px 0;
 grid-template-columns: 200px;
  }
}

Новый способ

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

:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

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

#navbar {
  margin: var(--base-margin) 0;
}
#navbar a {
  font-size: var(--base-font-size);
}
h1 {
  font-size: var(--base-font-size);
}
.grid {
  margin: var(--base-margin) 0;
  grid-template-columns: var(--columns);
}

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

@media all and (max-width: 450px) {
  :root {
 --columns: 200px;
 --base-margin: 15px;
 --base-font-size: 20px;
}

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

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

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

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

Автор: Per Harald Borgen

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree