12
Мар
2018

Как сделать адаптивность максимально простой с помощь 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 переменных

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

Настройка

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

Как сделать адаптивность максимально простой с помощь 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;
}

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

Уменьшить размер шрифта р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.

Источник: https://webformyself.com/kak-sdelat-adaptivnost-maksimalno-prostoj-s-pomoshh-css-peremennyx/

Тебе может это понравится...

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