Responsiivisen verkkosuunnittelun hallitseminen CSS-matematiikan funktioilla

Matematiikka on hyvää, matematiikka on hienoa, mutta haluatko käyttää aikaasi laskelmiin, kun tyylisivusi voi tehdä sen puolestasi?

CSS: ssä on kolme kätevää matemaattista funktiota, jotka muuttavat tapaa, jolla suunnittelet verkkosivustosi. Näytämme sinulle, miten ja miksi sinun pitäisi käyttää niitä.

Esittelyssä matematiikka CSS: ään

CSS on pääosin deklaratiivinen, mutta versiot ovat tuoneet kieleen toimintoja. Spesifikaatioissa on nyt monia funktioita, ja kolme yksinkertaisinta matemaattista funktiota voivat osoittautua erittäin hyödyllisiksi: calc, max ja min.

Voit käyttää tämä yksinkertainen CodePen-esimerkki auttaa seuraamaan opasta.

CSS calc() matemaattinen funktio

CSS calc()-funktio suorittaa yksinkertaisen laskutoimituksen ja käyttää tulosta ominaisuuden arvona. Tämä tarkoittaa, että voit määrittää dynaamisia arvoja ominaisuuksille, kuten korkeus ja leveys, ilman CSS @media-kyselyt.

Tämä toiminto tukee yhteenlaskua (+), kertolaskua (*), vähennyslaskua (-) ja jakoa (/) yhdellä operaattorilla.

Esimerkki: Tasaisten välien luominen näyttökokojen poikki

Verkkosivun näyttäminen samalta eri kokoisina voi olla vaikeaa, vaikka käyttäisitkin dynaamisia CSS-yksiköitä, kuten vw ja %. CSS calc()-funktio muuttaa tämän.

Kuten yllä olevasta kuvasta näkyy, näytön poikki kulkeva otsikkorivi on erotettu toisistaan ​​näytön koosta riippuen. Tämä johtuu siitä, että olemme asettaneet leveydeksi 80vw ja asettamalla väliksi 20vw; muuttuva arvo.

Jos käytämme sen sijaan calc()-komentoa, voimme asettaa välit samaksi minkä tahansa näytön koolle. Tähän käyttämämme omaisuus näyttää tältä:

leveys: laskettu (100vw - 400px);

Tämä asettaa otsikkopalkin leveyden 400 pikseliä pienemmäksi kuin sivun leveys, mikä luo tasaisen välin näytön koosta riippumatta.

CSS max() matemaattinen funktio

CSS max()-funktio valitsee poolista suurimman arvon lisätäkseen arvon CSS-ominaisuuteen. Voit lisätä niin monta potentiaalista arvoa kuin haluat, erottamalla jokainen pilkulla, mutta se käyttää vain korkeinta.

Esimerkki: Navigointipalkin korkeuden rajoittaminen

Yksi responsiivisen web-suunnittelun tärkeimmistä haasteista on suuntautuminen. Suurella pystysuuntaisella tietokoneen näytöllä toimivan sivuston tulee näyttää hyvältä myös pienemmällä pystysuuntaisella mobiilinäytöllä.

Tämä voi saada omaisuuden arvon näyttämään hyvältä pöytäkoneella ja huonolta mobiililaitteella, kuten yllä olevasta kuvasta näkyy. Navigointipalkissamme on asetettu korkeus 10vh, mutta tämä saa palkin näyttämään ohuelta pöytätietokoneissa.

Voimme käyttää CSS max() -funktiota tämän ongelman ratkaisemiseen:

korkeus: max (10vh, 80px);

Lisäämällä tällaisen säännön voimme asettaa navigointipalkin vähimmäiskorkeudeksi 80px, mutta säilyttää 10vh: n arvon, jos se on suurempi.

CSS min() Math Function

Min()-funktio on kuin max()-funktio, mutta se valitsee joukosta alimman arvon käytettäväksi ominaisuuden arvona.

Esimerkki: Tekstin enimmäiskoon asettaminen

Käytätkö dynaamista arvoa tai et, saada tekstin koko oikein eri alustoilla voi olla hankalaa. Voimme käyttää CSS min()-funktiota asettaaksesi kaksi tai useampia mahdollisia ominaisuusarvoja pääotsikon tekstin koolle, ja se käyttää pienintä.

Käyttää fonttikoko: 10vh; -ominaisuus esimerkissämme pääotsikon tekstissä saa tekstin näyttämään hyvältä työpöydällä, mutta aivan liian suurelta mobiililaitteissa.

Voit muuttaa tätä käyttämällä CSS min() -funktiota vaihtoehtoisen koon määrittämiseen:

kirjasinkoko: min (10vh, 10vw);

Tämä esimerkki toimii, koska mobiilinäytöt ovat korkeita ja ohuita, kun taas pöytätietokoneiden näytöt ovat leveitä ja lyhyitä. Tämä tarkoittaa, että näkymän leveys (vw) on pienempi mobiililaitteella kuin pöytäkoneella.

Matematiikan käyttäminen responsiiviseen verkkosuunnitteluun

CSS: llä valmiiksi pakatut matemaattiset funktiot tarjoavat ainutlaatuisen tavan tuottaa responsiivisia verkkosivustoja helposti. Sinun tarvitsee vain määrittää ne oikein aloittaaksesi.

Tietenkin on muita menetelmiä ja CSS-toimintoja, joiden avulla voit luoda sivustosta, joka näyttää hyvältä eri alustoilla.

Responsiivisen navigointipalkin rakentaminen HTML: n ja CSS: n avulla

Lue Seuraava

Kirjailijasta