Как сделать ваш HTML адаптивным с помощью сменных CSS

1656670450 kak sdelat vash html adaptivnym s pomoshhyu smennyh css
IuMWwaRBH-1VTyCpRImIsyYwp36b1lR6ObIM
Узнайте, как создать такую ​​отзывчивость с помощью сменных CSS.

Краткое руководство по созданию адаптивных веб-сайтов в 2019 году.

Если вы раньше не слышали об переменных CSS, это новая функция CSS, которая дает вам возможность использовать переменные в таблице стилей без необходимости выполнять какие-либо настройки.

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

h1 {  
  font-size: 30px;  
}

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

…in favour of this:

: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 на Scrimba:

Курс содержит восемь интерактивных скринкастов

Курс содержит восемь интерактивных скринкастов.

Или если вы хотите узнать больше о курсе, вы также можете прочитать пошаговое описание того, что вы узнаете в статье ниже:

Хотите изучить переменные CSS? Вот мой бесплатный курс из 8 частей!

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

Настройка

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

1*tLQrkgJJhKV3YrzPxsVVFA

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

1*CZkMgq0rp9nTdChVxwq33g

Как это выглядит на мобильном устройстве сначала.

1*zpFS--eNMyAzkdZWS1lLRQ

Как мы хотим, чтобы это выглядело?

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

  1. Переставили сетку так, чтобы она была расположена вертикально, а не поперек двух столбцов.
  2. Переехал весь макет немного приподнят
  3. Масштабированный шрифты вниз

Для этого нам нужно изменить следующий CSS:

h1 {  
  font-size: 30px;  
}

#navbar {  
  margin: 30px 0;  
}

#navbar a {  
  font-size: 30px;  
}

.grid {  
  margin: 30px 0;  
  grid-template-columns: 200px 200px;  
}

Точнее, нам нужно было внести такие изменения в медиа-запрос:

  • Уменьшить размер шрифта h1 до 20 пикселей
  • Уменьшите поле выше и ниже #navbar до 15 пикселей
  • Уменьшите размер шрифта внутри #navbar до 20 пикселей
  • Уменьшите поле над .grid до 15 пикселей
  • Изменить .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;  
}

And then we’ll simply use these variables across the app:

#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в отличие от определения всех селекторов.

Мы сократили наш медиа-запрос из четыре селектора к одному и от тринадцать строк до четырех.

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

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

Вы скоро станете мастером переменных CSS 🙂

Спасибо за чтение! Я Пер Борген, интерфейсный разработчик и соучредитель Scrimba. Не стесняйтесь связаться со мной через Twitter, если у вас есть вопросы или комментарии.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.

буткемп-баннер
Щелкните здесь, чтобы попасть в тренинг для углубленного обучения.

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

Ваш адрес email не будет опубликован.