Савладавање респонзивног веб дизајна са ЦСС математичким функцијама

Математика је добра, математика је одлична, али да ли желите да трошите своје време на прорачуне када ваш стилски лист то може да уради уместо вас?

ЦСС долази са три згодне математичке функције које ће променити начин на који дизајнирате своје веб странице. Показаћемо вам како и зашто бисте их требали користити.

Увођење математике у ЦСС

ЦСС је углавном декларативни, али ревизије су увеле функције у језик. Сада постоји много функција у спецификацији, а три најједноставније математичке могу се показати веома корисним: цалц, мак и мин.

Можете користити овај једноставан пример ЦодеПен-а да вам помогне да пратите заједно са водичем.

ЦСС цалц() Математичка функција

Функција ЦСС цалц() обавља једноставан прорачун и користи резултат као вредност својства. То значи да можете доделити динамичке вредности својствима као што су висина и ширина, све без ЦСС @медиа упити.

Ова функција подржава сабирање (+), множење (*), одузимање (-) и дељење (/) са једним оператором.

Пример: Прављење равномерног размака по величинама екрана

Може бити тешко учинити да веб страница изгледа исто у различитим величинама, чак и ако користите динамичке ЦСС јединице као што су вв и %. Функција ЦСС цалц() ово мења.

Као што можете видети на горњој слици, насловна трака која иде преко екрана има различит размак у зависности од величине екрана. То је зато што смо поставили ширину на 80вв, постављајући размак на 20вв; променљива вредност.

Ако уместо тога користимо цалц(), можемо подесити да размак буде исти на било којој величини екрана. Својство које користимо за ово изгледа овако:

ширина: калц (100вв - 400пк);

Ово поставља ширину наше насловне траке на 400 пиксела мање од ширине странице, стварајући равномеран размак без обзира на величину екрана.

ЦСС мак() Математичка функција

Функција ЦСС мак() бира највишу вредност из групе да би додала вредност ЦСС својству. Можете додати онолико потенцијалних вредности колико желите, при чему је свака од њих одвојена зарезом, али користиће се само највећа.

Пример: Ограничавање висине траке за навигацију

Један од кључних изазова који долази са респонзивним веб дизајном је оријентација. Сајт који ради на великом портретном компјутерском монитору такође треба да изгледа добро на мањем портретном мобилном екрану.

Ово може учинити да вредност имовине изгледа одлично на десктопу и лоше на мобилном, баш као што приказује горња слика. Наша навигациона трака има подешену висину од 10вх, али због тога трака изгледа танко на десктоп уређајима.

Можемо користити ЦСС мак() функцију да решимо овај проблем:

висина: мак (10вх, 80пк);

Додавањем оваквог правила можемо поставити минималну висину од 80пк за нашу навигациону траку, уз задржавање вредности од 10вх ако је већа.

ЦСС мин() Математичка функција

Функција мин() је као функција мак(), али бира најнижу вредност из групе коју ће користити као вредност својства.

Пример: Постављање максималне величине текста

Без обзира да ли користите динамичку вредност или не, добијање величине текста на свим платформама може бити незгодно. Можемо да користимо ЦСС мин() функцију да поставимо две или више потенцијалних вредности својстава за величину текста нашег главног заглавља, а она ће користити најмању.

Користећи фонт-сизе: 10вх; својство главног текста заглавља у нашем примеру чини да текст изгледа сјајно на десктопу, али превелик на мобилним уређајима.

Да бисте ово променили, можете користити функцију ЦСС мин() да бисте обезбедили алтернативну величину:

величина фонта: мин (10вх, 10вв);

Овај пример функционише јер су мобилни екрани високи и танки, док су десктоп монитори широки и кратки. То значи да је јединица ширине приказа (вв) мања на мобилном уређају него на десктопу.

Коришћење математике за респонзивни веб дизајн

Математичке функције које долазе унапред упаковане са ЦСС-ом нуде јединствен начин да се лако креирају веб сајтови који реагују. Само треба да их правилно подесите да бисте започели.

Наравно, постоје и друге методе и ЦСС функције које можете користити да направите сајт који изгледа одлично на свим платформама.

Како да направите прилагодљиву траку за навигацију користећи ХТМЛ и ЦСС

Реад Нект

О аутору