Zvládnutí responzivního webového designu s matematickými funkcemi CSS

Matematika je dobrá, matematika je skvělá, ale chcete trávit čas výpočty, když to za vás může udělat vaše šablona stylů?

CSS přichází se třemi praktickými matematickými funkcemi, které změní způsob, jakým navrhujete své webové stránky. Ukážeme vám, jak a proč byste je měli používat.

Představujeme matematiku CSS

CSS je převážně deklarativní, ale revize zavedly do jazyka funkce. Ve specifikaci je nyní mnoho funkcí a tři z nejjednodušších matematických funkcí se mohou ukázat jako velmi užitečné: calc, max a min.

Můžeš použít tento jednoduchý příklad CodePen pomoci následovat spolu s průvodcem.

CSS calc() matematická funkce

Funkce CSS calc() provede jednoduchý výpočet a použije výsledek jako hodnotu vlastnosti. To znamená, že můžete vlastnostem, jako je výška a šířka, přiřadit dynamické hodnoty CSS @media dotazy.

Tato funkce podporuje sčítání (+), násobení (*), odčítání (-) a dělení (/) pomocí jediného operátoru.

Příklad: Vytvoření rovnoměrných mezer mezi velikostmi obrazovky

Docílit toho, aby webová stránka vypadala stejně při různých velikostech, může být obtížné, i když používáte dynamické jednotky CSS jako vw a %. Funkce CSS calc() to mění.

Jak můžete vidět na obrázku výše, záhlaví, které prochází přes obrazovku, má různé mezery v závislosti na velikosti obrazovky. Je to proto, že jsme nastavili šířku na 80vw, nastavení rozteče na 20vw; proměnnou hodnotu.

Pokud místo toho použijeme calc(), můžeme nastavit, aby byly mezery stejné na libovolné velikosti obrazovky. Vlastnost, kterou k tomu používáme, vypadá takto:

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

Tím se nastaví šířka našeho titulního pruhu o 400 pixelů menší, než je šířka stránky, čímž se vytvoří rovnoměrné mezery bez ohledu na velikost displeje.

CSS max() matematická funkce

Funkce CSS max() vybere nejvyšší hodnotu z fondu pro přidání hodnoty do vlastnosti CSS. Můžete přidat libovolný počet potenciálních hodnot, každou oddělujte čárkou, ale použije se pouze ta nejvyšší.

Příklad: Omezení výšky navigační lišty

Jednou z klíčových výzev, které s sebou přináší responzivní webdesign, je orientace. Web, který funguje na velkém monitoru počítače na výšku, musí také vypadat dobře na menší obrazovce mobilu na výšku.

Díky tomu může hodnota nemovitosti vypadat skvěle na počítači a špatně na mobilu, jak ukazuje obrázek výše. Naše navigační lišta má nastavenou výšku 10vh, ale díky tomu vypadá lišta na stolních zařízeních tence.

K vyřešení tohoto problému můžeme použít funkci CSS max():

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

Přidáním pravidla, jako je toto, můžeme nastavit minimální výšku 80px pro naši navigační lištu, při zachování hodnoty 10vh, pokud je vyšší.

CSS min() Matematická funkce

Funkce min() je jako funkce max(), ale jako hodnotu vlastnosti vybere nejnižší hodnotu z fondu.

Příklad: Nastavení maximální velikosti textu

Ať už používáte dynamickou hodnotu nebo ne, získání velikosti textu přímo na různých platformách může být záludné. Funkci CSS min() můžeme použít k nastavení dvou nebo více hodnot potenciálních vlastností pro velikost hlavního textu záhlaví a použije nejmenší.

Používat velikost písma: 10vh; Díky vlastnosti na hlavním textu záhlaví v našem příkladu vypadá text skvěle na počítači, ale příliš velký na mobilních zařízeních.

Chcete-li to změnit, můžete použít funkci CSS min() k poskytnutí alternativní velikosti:

velikost písma: min (10vh, 10vw);

Tento příklad funguje, protože mobilní displeje jsou vysoké a tenké, zatímco stolní monitory jsou široké a krátké. To znamená, že jednotka šířky zobrazení (vw) je na mobilu menší než na počítači.

Použití matematiky pro responzivní webdesign

Matematické funkce, které jsou dodávány s CSS, nabízejí jedinečný způsob, jak snadno vytvářet responzivní webové stránky. Abyste mohli začít, stačí je správně nastavit.

Samozřejmě existují další metody a funkce CSS, které můžete použít k vytvoření webu, který vypadá skvěle na různých platformách.

Jak vytvořit responzivní navigační panel pomocí HTML a CSS

Přečtěte si další

O autorovi