Zvládnutie responzívneho webového dizajnu s matematickými funkciami CSS

Matematika je dobrá, matematika je skvelá, ale chcete tráviť čas výpočtami, keď to za vás môže urobiť váš štýlový list?

CSS prichádza s tromi praktickými matematickými funkciami, ktoré zmenia spôsob, akým navrhujete svoje webové stránky. Ukážeme vám, ako a prečo by ste ich mali používať.

Predstavujeme matematiku CSS

CSS je hlavne deklaratívne, ale revízie zaviedli do jazyka funkcie. Teraz je v špecifikácii veľa funkcií a tri z najjednoduchších matematických funkcií sa môžu ukázať ako veľmi užitočné: calc, max a min.

Môžeš použiť tento jednoduchý príklad CodePen pomôcť nasledovať spolu so sprievodcom.

CSS calc() matematická funkcia

Funkcia CSS calc() vykoná jednoduchý výpočet a použije výsledok ako hodnotu vlastnosti. To znamená, že vlastnostiam ako výška a šírka môžete priradiť dynamické hodnoty CSS @media dotazy.

Táto funkcia podporuje sčítanie (+), násobenie (*), odčítanie (-) a delenie (/) s jediným operátorom.

Príklad: Vytvorenie rovnomerných medzier medzi veľkosťami obrazovky

Dosiahnuť, aby webová stránka vyzerala rovnako pri rôznych veľkostiach môže byť náročné, aj keď používate dynamické CSS jednotky ako vw a %. Funkcia CSS calc() to mení.

Ako môžete vidieť na obrázku vyššie, záhlavie prechádzajúce cez obrazovku má rôzne rozostupy v závislosti od veľkosti obrazovky. Je to preto, že sme nastavili šírku na 80vw, nastavenie rozstupu na 20vw; premenlivá hodnota.

Ak namiesto toho použijeme calc(), môžeme nastaviť, aby boli medzery rovnaké na akejkoľvek veľkosti obrazovky. Vlastnosť, ktorú na to používame, vyzerá takto:

šírka: calc (100vw - 400px);

Tým sa nastaví šírka našej titulnej lišty na 400 pixelov menšiu ako je šírka stránky, čím sa vytvorí rovnomerné rozloženie bez ohľadu na veľkosť displeja.

CSS max() matematická funkcia

Funkcia CSS max() vyberie najvyššiu hodnotu z fondu na pridanie hodnoty do vlastnosti CSS. Môžete pridať toľko potenciálnych hodnôt, koľko chcete, pričom každú oddeľte čiarkou, ale použije sa len tá najvyššia.

Príklad: Obmedzenie výšky navigačného panela

Jednou z kľúčových výziev, ktoré so sebou prináša responzívny webový dizajn, je orientácia. Stránka, ktorá funguje na veľkom monitore počítača na výšku, musí vyzerať dobre aj na menšej obrazovke mobilu na výšku.

To môže spôsobiť, že hodnota nehnuteľnosti bude vyzerať skvele na počítači a zle na mobilnom zariadení, ako ukazuje obrázok vyššie. Naša navigačná lišta má nastavenú výšku 10vh, ale vďaka tomu vyzerá lišta na stolných zariadeniach tenká.

Na vyriešenie tohto problému môžeme použiť funkciu CSS max():

výška: max (10vh, 80px);

Pridaním pravidla, ako je toto, môžeme nastaviť minimálnu výšku našej navigačnej lišty na 80 pixelov, pričom zachováme hodnotu 10vh, ak je vyššia.

CSS min() matematická funkcia

Funkcia min() je ako funkcia max(), ale vyberá najnižšiu hodnotu z fondu, ktorá sa použije ako hodnota vlastnosti.

Príklad: Nastavenie maximálnej veľkosti textu

Či už používate dynamickú hodnotu alebo nie, získanie veľkosti textu naprieč platformami môže byť zložité. Funkciu CSS min() môžeme použiť na nastavenie dvoch alebo viacerých potenciálnych hodnôt vlastností pre veľkosť hlavného textu hlavičky a použije najmenšiu.

Pomocou a veľkosť písma: 10vh; Vlastnosť textu hlavnej hlavičky v našom príklade spôsobuje, že text vyzerá skvele na počítači, ale príliš veľký na mobilných zariadeniach.

Ak to chcete zmeniť, môžete použiť funkciu CSS min() na poskytnutie alternatívnej veľkosti:

veľkosť písma: min (10vh, 10vw);

Tento príklad funguje, pretože mobilné displeje sú vysoké a tenké, zatiaľ čo stolné monitory sú široké a krátke. To znamená, že jednotka šírky zobrazenia (vw) je na mobilnom zariadení menšia ako na počítači.

Použitie matematiky pre responzívny webový dizajn

Matematické funkcie, ktoré sa dodávajú v predpripravenom súbore CSS, ponúkajú jedinečný spôsob, ako jednoducho vytvárať responzívne webové stránky. Ak chcete začať, musíte ich správne nastaviť.

Samozrejme, existujú aj iné metódy a funkcie CSS, ktoré môžete použiť na vytvorenie stránky, ktorá bude vyzerať skvele naprieč platformami.

Ako vytvoriť responzívny navigačný panel pomocou HTML a CSS

Prečítajte si ďalej

O autorovi