CSS Academy · Oppitunti

Näkymän yksiköt: vw, vh ja dvh

Mitoitatte elementtejä selaimen näkymän perusteella vw-, vh- ja nykyaikaisilla dvh-yksiköillä.

Oppitunti 3/413 vaihetta

Näkymän yksiköt: vw, vh ja dvh on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä viewport-yksiköt ovat?

Viewport-yksiköt ovat suhteessa selaimen näkymäalueen kokoon eli selainikkunan näkyvään alueeseen. Niiden avulla voidaan toteuttaa käytettävissä olevan näyttötilan mukaan skaalautuvia asetteluja ja typografiaa.

vw — Näkymäalueen leveys

1vw = 1 % näkymäalueen leveydestä. 100vw täyttää koko näkymäalueen leveyden. Se on hyödyllinen täyden leveyden elementeissä ilman prosenttiyksiköihin liittyviä ongelmia.

<div class="hero"></div>

vh — Näkymäalueen korkeus

1vh = 1 % näkymäalueen korkeudesta. 100vh täyttää koko näkymäalueen korkeuden. Sitä käytetään perinteisesti koko näytön hero-osioissa ja modaalisissa ikkunoissa.

<div class="fullscreen">100vh fills the viewport height</div>

Mobiilin 100vh-ongelma

Mobiiliselaimissa näkymäalueen korkeus muuttuu, kun selaimen käyttöliittymä (osoiterivi) tulee vieritettäessä näkyviin tai piilotetaan. 100vh voi sisältää selaimen käyttöliittymän tai jättää sen pois epäjohdonmukaisesti, jolloin osa sisällöstä voi jäädä piiloon.

dvh — Dynaaminen näkymäalueen korkeus

dvh (dynamic viewport height) päivittyy dynaamisesti vastaamaan todellista näkyvää korkeutta sen jälkeen, kun selaimen käyttöliittymä on mukautunut. Se ratkaisee mobiilin 100vh-ongelman.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh ja lvh

CSS tarjoaa myös yksiköt svh (pieni näkymäalueen korkeus – selaimen käyttöliittymä suljetaan aina pois) ja lvh (suuri näkymäalueen korkeus – ikään kuin käyttöliittymä olisi piilotettu). Näillä voidaan hallita mobiilin näkymäalueen toimintaa tarkasti.

Joustava typografia vw-yksiköllä

vw-yksikön käyttäminen fonttikokoon luo tekstin, joka skaalautuu näytön mukaan:

<h1>Fluid Heading</h1>

Näkymäalueen leveyden rajoitukset

100vw sisältää työpöytäselaimissa vierityspalkin leveyden. Huolimattomasti käytettynä tämä aiheuttaa vaakasuuntaista ylivuotoa. Käytä lohkotason elementeissä mieluummin width: 100% -määritystä ja varaa vw erityistapauksiin.

vmin ja vmax

1vmin = 1 % näkymäalueen pienemmästä mitasta (leveydestä tai korkeudesta). 1vmax = 1 % suuremmasta mitasta. Ne ovat hyödyllisiä neliömäisissä säilöissä, jotka mukautuvat näytön suunnan muutoksiin.

<div class="square"></div>

svw, lvw, dvw — Leveyden muunnelmat

Kuten korkeusmuunnelmissa, CSS tarjoaa leveyttä varten yksiköt svw, lvw ja dvw. Dynaamiset muunnelmat (dvw, dvh) ovat hyödyllisimpiä mobiilissa.

Käytännön mallit

Yleisiä viewport-yksiköiden käyttötapoja:

min-height: 100dvh — koko näytön mobiilissa toimivat osiot
height: 100svh — kiinteät käyttöliittymäpaneelit
font-size: clamp(1rem, 2.5vw, 2rem) — joustavat otsikot
width: min(800px, 90vw) — sopivan levyiset säilöt

Pikakoe

Miksi dvh-yksikköä suositellaan vh-yksikön sijaan koko näytön mobiiliosioissa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

vw ja vh ovat 1 % näkymäalueen leveydestä ja korkeudesta. Mobiilissa vh on epäluotettava selaimen käyttöliittymän vuoksi. Käytä dvh-yksikköä dynaamisiin ja mobiilin todellisen koon huomioiviin koko näytön asetteluihin. vmin ja vmax reagoivat näkymäalueen pienempään ja suurempaan mittaan.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Näkymän yksiköt: vw, vh ja dvh” ilmainen?

Kyllä – oppitunnin ”Näkymän yksiköt: vw, vh ja dvh” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Näkymän yksiköt: vw, vh ja dvh”?

Mitoitatte elementtejä selaimen näkymän perusteella vw-, vh- ja nykyaikaisilla dvh-yksiköillä. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Näkymän yksiköt: vw, vh ja dvh”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy