Apgūstiet adaptīvu tīmekļa dizainu ar CSS matemātikas funkcijām

Matemātika ir laba, matemātika ir lieliska, bet vai vēlaties pavadīt laiku, veicot aprēķinus, kad stila lapa to var izdarīt jūsu vietā?

CSS ir aprīkotas ar trim ērtām matemātiskām funkcijām, kas mainīs veidu, kā jūs veidojat vietnes. Mēs jums parādīsim, kā un kāpēc jums tie jāizmanto.

Iepazīstinām ar matemātiku CSS

CSS galvenokārt ir deklaratīvs, taču pārskatīšana ir ieviesusi valodā funkcijas. Tagad specifikācijā ir daudz funkciju, un trīs vienkāršākās matemātiskās funkcijas var izrādīties ļoti noderīgas: calc, max un min.

Tu vari izmantot šis vienkāršais CodePen piemērs lai palīdzētu sekot līdzi ceļvedim.

CSS calc() matemātiskā funkcija

CSS calc() funkcija veic vienkāršu aprēķinu un izmanto rezultātu kā īpašuma vērtību. Tas nozīmē, ka varat piešķirt dinamiskas vērtības tādiem rekvizītiem kā augstums un platums, bez tā CSS @media vaicājumi.

Šī funkcija atbalsta saskaitīšanu (+), reizināšanu (*), atņemšanu (-) un dalīšanu (/) ar vienu operatoru.

Piemērs: vienmērīgu atstarpju izveidošana starp ekrāna izmēriem

Var būt grūti panākt, lai tīmekļa lapa izskatītos vienādi dažādos izmēros, pat ja izmantojat dinamiskas CSS vienības, piemēram, vw un %. CSS calc() funkcija to maina.

Kā redzat attēlā iepriekš, virsraksta joslai, kas iet pāri ekrānam, ir atšķirīgs atstatums atkarībā no ekrāna izmēra. Tas ir tāpēc, ka esam iestatījuši platumu uz 80vw, iestatot atstarpi uz 20vw; mainīga vērtība.

Ja tā vietā izmantojam calc(), mēs varam iestatīt vienādu atstarpi jebkura izmēra ekrānā. Īpašums, ko mēs izmantojam šim, izskatās šādi:

platums: calc (100vw - 400px);

Tādējādi virsraksta joslas platums tiek iestatīts uz 400 pikseļiem mazāks nekā lapas platums, radot vienmērīgu atstarpi neatkarīgi no displeja izmēra.

CSS max() matemātiskā funkcija

Funkcija CSS max() atlasa augstāko vērtību no pūla, lai pievienotu vērtību CSS īpašumam. Varat pievienot tik daudz potenciālo vērtību, cik vēlaties, katru atdalot ar komatu, taču tiks izmantota tikai lielākā vērtība.

Piemērs: Navigācijas joslas augstuma ierobežošana

Viens no galvenajiem izaicinājumiem, kas nāk ar adaptīvu tīmekļa dizainu, ir orientācija. Vietnei, kas darbojas uz liela portreta datora monitora, ir labi jāizskatās arī uz mazāka portreta mobilās ierīces ekrāna.

Tādējādi īpašuma vērtība var izskatīties lieliski galddatorā un slikta mobilajā ierīcē, tāpat kā parādīts iepriekš redzamajā attēlā. Mūsu navigācijas joslai ir iestatīts 10 vh augstums, taču tāpēc galddatoru ierīcēs josla izskatās plānāka.

Mēs varam izmantot CSS max() funkciju, lai atrisinātu šo problēmu:

augstums: max (10vh, 80px);

Pievienojot šādu noteikumu, mēs varam iestatīt mūsu navigācijas joslas minimālo augstumu 80 pikseļus, vienlaikus saglabājot vērtību 10 vh, ja tā ir lielāka.

CSS min() Matemātiskā funkcija

Funkcija min () ir līdzīga funkcijai max (), taču tā izvēlas zemāko vērtību no kopas, ko izmantot kā īpašuma vērtību.

Piemērs: maksimālā teksta lieluma iestatīšana

Neatkarīgi no tā, vai izmantojat dinamisku vērtību, teksta lieluma iegūšana visās platformās var būt grūts. Mēs varam izmantot funkciju CSS min(), lai iestatītu divas vai vairākas iespējamās rekvizītu vērtības mūsu galvenajam galvenes teksta izmēram, un tā izmantos mazāko.

Izmantojot a fonta izmērs: 10vh; Īpašums galvenajā galvenes tekstā mūsu piemērā liek tekstam izskatīties lieliski galddatorā, bet pārāk liels mobilajās ierīcēs.

Lai to mainītu, varat izmantot CSS min() funkciju, lai nodrošinātu alternatīvu izmēru:

fonta izmērs: min (10vh, 10vw);

Šis piemērs darbojas, jo mobilo ierīču displeji ir augsti un plāni, savukārt galddatoru monitori ir plati un īsi. Tas nozīmē, ka skata platuma (vw) vienība mobilajā ierīcē ir mazāka nekā galddatorā.

Matemātikas izmantošana adaptīvam tīmekļa dizainam

Matemātiskās funkcijas, kas tiek komplektētas ar CSS, piedāvā unikālu veidu, kā viegli izveidot adaptīvas vietnes. Lai sāktu darbu, tie vienkārši ir pareizi jāiestata.

Protams, ir arī citas metodes un CSS funkcijas, ko varat izmantot, lai izveidotu vietni, kas izskatās lieliski dažādās platformās.

Kā izveidot atsaucīgu navigācijas joslu, izmantojot HTML un CSS

Lasiet Tālāk

Par autoru