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

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

1 сентября 2018 Перевод 183 0

Если вы еще не слышали о 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.

sintaksis-mozhet-pokazatsya-dovolno-strannym

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

Первоначальная настройка

Сейчас разберемся, как сделать адаптивный сайт с портфолио, который выглядит так:

pervonachalnaya-nastrojka

На компьютере смотрится отлично. Однако, как видно на картинке ниже, на телефоне отображается этот сайт так себе:

a-dolzhno-vyglyadet-tak

А должно выглядеть так:

na-pervoj-versii-bylo-vneseno-neskolko-popravok

На первой версии было внесено несколько поправок в стили, чтобы сайт лучше выглядел на телефоне. Вот что мы сделали:

  • Поменяли таблицу так, чтобы ячейки располагались вертикально, а не в два столбца;
  • Подняли весь макет немного выше;
  • Сделали размер шрифта меньше.

Чтобы это сделать, нужно поменять следующий код на CSS:

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

Если точнее, нужно изменить следующие значения в мультимедийном запросе:

  • Уменьшить шрифт h1 до 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 селекторов до одного и с 13 строк до 4.

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

В заключение можно сказать, что CSS переменные - будущее адаптивности!

Реклама
Комментариев еще не оставлено
no_avatar