Овладяване на отзивчив уеб дизайн с CSS математически функции

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

CSS идва с три удобни математически функции, които ще променят начина, по който проектирате вашите уебсайтове. Ще ви покажем как и защо трябва да ги използвате.

Представяне на математиката в CSS

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

Можеш да използваш този прост пример за CodePen за да ви помогне да следвате ръководството.

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

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

Тази функция поддържа събиране (+), умножение (*), изваждане (-) и деление (/) с един оператор.

Пример: Създаване на равномерно разстояние между размерите на екрана

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

Както можете да видите на изображението по-горе, заглавната лента, която преминава през екрана, има различно разстояние в зависимост от размера на екрана. Това е така, защото сме задали ширината на 80vw, задавайки разстоянието на 20vw; променлива стойност.

Ако вместо това използваме calc(), можем да настроим разстоянието да бъде еднакво за всеки размер на екрана. Имотът, който използваме за това, изглежда така:

ширина: изчислен (100vw - 400px);

Това задава ширината на нашата заглавна лента на 400px по-малка от ширината на страницата, създавайки равномерно разстояние, независимо от размера на дисплея.

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

Функцията CSS max() избира най-високата стойност от група, за да добави стойност към свойство на CSS. Можете да добавите толкова потенциални стойности, колкото искате, като всяка се разделя със запетая, но ще използва само най-високата.

Пример: Ограничаване на височината на лентата за навигация

Едно от ключовите предизвикателства, които идват с отзивчивия уеб дизайн, е ориентацията. Сайт, който работи на голям портретен компютърен монитор, също трябва да изглежда добре на по-малък портретен мобилен екран.

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

Можем да използваме функцията CSS max(), за да решим този проблем:

височина: макс (10vh, 80px);

Като добавим правило като това, можем да зададем минимална височина от 80px за нашата навигационна лента, като същевременно поддържаме стойността от 10vh, ако е по-висока.

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

Функцията min() е като функцията max(), но избира най-ниската стойност от групата, която да използва като стойност на свойството.

Пример: Задаване на максимален размер на текста

Независимо дали използвате динамична стойност или не, получаване на размера на текста директно в различните платформи може да бъде сложно. Можем да използваме функцията CSS min(), за да зададем две или повече потенциални стойности на свойствата за основния размер на текста на заглавката и тя ще използва най-малкия.

Използването на a размер на шрифта: 10vh; свойството на основния текст на заглавката в нашия пример прави текста да изглежда страхотно на настолен компютър, но твърде голям на мобилни устройства.

За да промените това, можете да използвате функцията CSS min(), за да предоставите алтернативно оразмеряване:

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

Този пример работи, защото мобилните дисплеи са високи и тънки, докато настолните монитори са широки и къси. Това означава, че единицата за ширина на изглед (vw) е по-малка на мобилни устройства, отколкото на настолни компютри.

Използване на математика за отзивчив уеб дизайн

Математическите функции, които идват предварително опаковани с CSS, предлагат уникален начин за създаване на отзивчиви уебсайтове с лекота. Просто трябва да ги настроите правилно, за да започнете.

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

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

Прочетете Следващото

За автора