Освоение адаптивного веб-дизайна с помощью математических функций CSS

Математика — это хорошо, математика — это прекрасно, но хотите ли вы тратить время на расчеты, когда таблица стилей может сделать это за вас?

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

Знакомство с математикой в ​​CSS

CSS в основном декларативен, но изменения внесли в язык функции. Сейчас в спецификации много функций, и три самые простые математические функции могут оказаться очень полезными: calc, max и min.

Ты можешь использовать этот простой пример CodePen чтобы помочь следовать вместе с гидом.

CSS calc() Математическая функция

Функция CSS calc() выполняет простые вычисления и использует результат в качестве значения свойства. Это означает, что вы можете назначать динамические значения таким свойствам, как высота и ширина, и все это без CSS-запросы @media.

Эта функция поддерживает сложение (+), умножение (*), вычитание (-) и деление (/) с помощью одного оператора.

Пример: создание равномерного интервала между размерами экрана

Сделать так, чтобы веб-страница выглядела одинаково при разных размерах, может быть сложно, даже если вы используете динамические единицы CSS, такие как vw и %. Функция CSS calc() меняет это.

Как вы можете видеть на изображении выше, строка заголовка, которая проходит через экран, имеет разный интервал в зависимости от размера экрана. Это потому, что мы установили ширину на 80vw, установив интервал на 20vw; переменное значение.

Если вместо этого мы воспользуемся функцией calc(), мы сможем установить одинаковый интервал для любого размера экрана. Свойство, которое мы используем для этого, выглядит следующим образом:

ширина: calc (100vw - 400px);

Это устанавливает ширину нашей строки заголовка на 400 пикселей меньше, чем ширина страницы, создавая равномерный интервал независимо от размера дисплея.

Математическая функция CSS max()

Функция CSS max() выбирает наибольшее значение из пула, чтобы добавить значение к свойству CSS. Вы можете добавить столько потенциальных значений, сколько хотите, разделяя их запятой, но будет использоваться только самое высокое значение.

Пример: ограничение высоты панели навигации

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

Это может привести к тому, что значение свойства будет хорошо выглядеть на ПК и плохо на мобильных устройствах, как показано на изображении выше. Наша панель навигации имеет установленную высоту 10vh, но из-за этого панель выглядит тонкой на настольных устройствах.

Мы можем использовать функцию CSS max() для решения этой проблемы:

высота: максимальная (10vh, 80px);

Добавив подобное правило, мы можем установить минимальную высоту 80 пикселей для нашей панели навигации, сохраняя при этом значение 10vh, если оно выше.

Математическая функция CSS min()

Функция min() похожа на функцию max(), но она выбирает наименьшее значение из пула для использования в качестве значения свойства.

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

Используете ли вы динамическое значение или нет, получение размера текста на разных платформах может быть сложно. Мы можем использовать функцию CSS min(), чтобы установить два или более потенциальных значения свойства для нашего основного размера текста заголовка, и будет использоваться наименьшее из них.

С помощью размер шрифта: 10vh; Свойство основного текста заголовка в нашем примере делает текст отличным на рабочем столе, но слишком большим на мобильных устройствах.

Чтобы изменить это, вы можете использовать функцию CSS min() для предоставления альтернативного размера:

размер шрифта: мин. (10vh, 10vw);

Этот пример работает, потому что мобильные дисплеи высокие и тонкие, а мониторы настольных компьютеров широкие и короткие. Это означает, что единица измерения ширины просмотра (vw) на мобильных устройствах меньше, чем на настольных компьютерах.

Использование математики для адаптивного веб-дизайна

Математические функции, поставляемые в комплекте с CSS, предлагают уникальный способ легкого создания адаптивных веб-сайтов. Вам просто нужно правильно настроить их, чтобы начать.

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

Как создать адаптивную панель навигации с помощью HTML и CSS

Читать дальше

Об авторе