Reszponzív webdesign elsajátítása CSS matematikai függvényekkel

A matematika jó, a matematika nagyszerű, de szeretne számításokkal tölteni az idejét, amikor a stíluslapja meg tudja csinálni?

A CSS három praktikus matematikai függvényt tartalmaz, amelyek megváltoztatják a webhelyek tervezésének módját. Megmutatjuk, hogyan és miért érdemes használni őket.

A matematika bemutatása a CSS-ben

A CSS főként deklaratív, de a revíziók funkciókat is bevezettek a nyelvbe. A specifikációban számos függvény található, és a legegyszerűbb matematikai függvények közül három nagyon hasznosnak bizonyulhat: calc, max és min.

Te tudod használni ezt az egyszerű CodePen példát hogy segítsen követni az útmutatót.

CSS calc() matematikai függvény

A CSS calc() függvény egyszerű számítást végez, és az eredményt tulajdonságértékként használja. Ez azt jelenti, hogy dinamikus értékeket rendelhet olyan tulajdonságokhoz, mint a magasság és a szélesség, mindezt anélkül CSS @media lekérdezések.

Ez a funkció egyetlen operátorral támogatja az összeadást (+), a szorzást (*), a kivonást (-) és az osztást (/).

Példa: Egyenletes térköz létrehozása a képernyőméretek között

Nehéz lehet egy weboldalt egyforma kinézetűvé tenni különböző méretekben, még akkor is, ha olyan dinamikus CSS-egységeket használ, mint a vw és %. A CSS calc() függvény ezt megváltoztatja.

Amint a fenti képen látható, a képernyőn áthaladó címsor a képernyő méretétől függően eltérő távolsággal rendelkezik. Ez azért van, mert a szélességet 80vw-ra állítottuk, a távolságot pedig 20vw-ra; változó érték.

Ha helyette a calc()-t használjuk, akkor a térközt minden képernyőméreten azonosra állíthatjuk. Az általunk használt ingatlan így néz ki:

szélesség: kalkulált (100vw - 400px);

Ezzel a címsorunk szélességét 400 képponttal kisebbre állítja, mint az oldal szélességét, így egyenletes térközt hoz létre a kijelző méretétől függetlenül.

CSS max() matematikai függvény

A CSS max() függvény a legmagasabb értéket választja ki a készletből, hogy értéket adjon egy CSS-tulajdonsághoz. Tetszőleges számú potenciális értéket adhat hozzá, mindegyiket vesszővel elválasztva, de csak a legmagasabb értéket használja.

Példa: A navigációs sáv magasságának korlátozása

A reszponzív webdesignnal járó egyik legfontosabb kihívás a tájékozódás. Egy nagy portré számítógép-monitoron működő webhelynek egy kisebb, álló mobilképernyőn is jól kell mutatnia.

Emiatt egy ingatlan értéke nagyszerűen néz ki asztali számítógépen, és rossz mobileszközön, ahogy a fenti kép is mutatja. A navigációs sávunk beállított magassága 10 VH, de ettől a sáv vékonynak tűnik az asztali eszközökön.

A probléma megoldására használhatjuk a CSS max() függvényt:

magasság: max (10vh, 80px);

Egy ilyen szabály hozzáadásával beállíthatjuk a navigációs sáv minimális magasságát 80px-ben, miközben megtartjuk a 10vh értékét, ha magasabb.

CSS min() matematikai függvény

A min() függvény olyan, mint a max() függvény, de a készlet legalacsonyabb értékét választja tulajdonságértékként.

Példa: Maximális szövegméret beállítása

Akár dinamikus értéket használ, akár nem, megfelelő szövegméret elérése a különböző platformokon trükkös lehet. A CSS min() függvény segítségével beállíthatunk két vagy több potenciális tulajdonságértéket a fő fejlécszöveg méretéhez, és ez a legkisebbet fogja használni.

Használva betűméret: 10vh; Példánkban a fő fejlécszöveg tulajdonsága miatt a szöveg nagyszerűen néz ki asztali számítógépen, de túl nagy mobileszközökön.

Ennek megváltoztatásához használhatja a CSS min() függvényt, amely alternatív méretezést biztosít:

betűméret: min (10vh, 10vw);

Ez a példa azért működik, mert a mobil kijelzők magasak és vékonyak, míg az asztali monitorok szélesek és rövidek. Ez azt jelenti, hogy a nézetszélesség (vw) egység mobilon kisebb, mint asztali számítógépen.

A matematika használata a reszponzív webdesignhoz

A CSS-be előre csomagolt matematikai függvények egyedülálló módot kínálnak a reszponzív webhelyek egyszerű létrehozására. Csak helyesen kell beállítania őket az induláshoz.

Természetesen vannak más módszerek és CSS-funkciók is, amelyek segítségével olyan webhelyet hozhat létre, amely minden platformon jól néz ki.

Hogyan készítsünk érzékeny navigációs sávot HTML és CSS használatával

Olvassa el a következőt

A szerzőről