Guide til CSS Viewport Units: vw, vh, vmin, vmax
Visningspoenglengder eller visningsenheter som de blir hyppigere referert til, er responsive CSS-enheter som lar deg definere dimensjoner som en prosentandel av bredden eller lengden på visningsporten . Viewport-enheter kan være ganske nyttige i tilfeller der andre følsomme CSS-enheter, for eksempel prosentandeler, er vanskelige å gjøre arbeid .
Selv om W3Cs dokumentasjon på viewport-enheter inneholder alt som kan settes inn i teorien, er det ikke veldig verbose. Så i denne artikkelen vil vi se på hvordan disse CSS-enhetene fungerer i praksis .
Visningshøyde ( vh
) og visningsbredde ( vw
)
W3C definerer visningsport som "størrelsen på den innledende inneholdende blokk". Visningsport er med andre ord området som finnes i nettleservinduet eller et annet visningsområde på en skjerm.
vw
og vh
enhetene står for prosentandelen av bredden og høyden til den faktiske visningsporten. De kan ta en verdi mellom 0 og 100 i henhold til følgende regler:
100vw = 100% av visningsbredde 1vw = 1% av visningsbredde 100vh = 100% av visningshøyde 1vh = 1% av visningshøyde
Forskjeller til prosentandel enheter
Så hvordan er visningsenheter forskjellig fra prosentandel enheter? Prosentandelene arver størrelsen på foreldreelementet mens viewport-enheter ikke gjør det. Viewport-enheter beregnes alltid som prosentandel av visningsstørrelsen . Som et resultat kan et element som er definert av viewport-enheter, overstige størrelsen på dets overordnede.
Eksempel: Fullskjermseksjoner
Fullskjermseksjoner er sannsynligvis de mest brukte brukstilfeller av visningsenheter.
HTML er ganske enkelt ; Vi har bare tre seksjoner under hverandre, og vi vil at hver av dem skal dekke hele skjermen (men ikke mer).
I CSS bruker vi 100vh
som en height
og 100%
som width
. Vi bruker ikke vw
enheten her som standard, også rullestenger blir lagt til visningsstørrelsen. Så, hvis vi brukte width: 100vw;
regelen en horisontal rullebjelke vil vises nederst i nettleservinduet .
* {margin: 0; polstring: 0; } seksjon {bakgrunnsstørrelse: deksel; bakgrunnsposisjon: senter; bredde: 100%; høyde: 100vh; } .section-1 {bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); } .section-2 {bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg'); } .section-3 {bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'); }
På gif demoen under, kan du se at vh
er virkelig en responsiv enhet .
overflow: auto;
regelen til rotelementet. Denne løsningen virker bare delvis, skjønt. Den horisontale rullefeltet forsvinner faktisk, men width
beregnes fortsatt ut fra visningsbredden (sidebjørnen inkludert), slik at elementene vil være litt større enn de burde være.Jeg vil si, jeg ville ikke våge å bruke vw
enheten på liming av fullskjermelementer på grunn av denne grunnen. Vi trenger ikke engang det, som width: 100%;
regelen fungerer perfekt. Med fullskjermoppsett, har den virkelige utfordringen alltid vært hvordan man setter en riktig høydeverdi, og vh
enheten gir en glimrende løsning for det.
Andre brukstilfeller
Hvis du er interessert i andre brukstilfeller, har vw
og vh
Lullabot en flott artikkel som viser en håndfull eksempler på virkelige eksempler (med Codepen demoer), for eksempel:
- Faste forholdskort.
- Holde et element kortere enn skjermen.
- Skaleringstekst.
- Bryter ut av beholderen.
Opera.dev har også en kort veiledning om hvordan du kan utnytte vw
enheten til å skape responsiv typografi .
Du kan ikke bare bruke viewport-enheter på width
og height
, men på en hvilken som helst annen. For eksempel kan du angi størrelsen på paddings og margins ved hjelp av vw
og vh
enhetene også.
Viewport min ( vmin
) og viewport max ( vmax
)
vmin
og vmax
enhetene lar deg få tilgang til størrelsen på den mindre eller den større siden av visningsporten, i henhold til følgende regler:
100vmin = 100vw eller 100vh, avhengig av hvilken som er mindre 1vmin = 1vw eller 1vh, avhengig av hvilken som er mindre 100vmax = 100vw eller 100vh, avhengig av hvilken som er større 1vmax = 1vw eller 1vh, avhengig av hvilket som er større
Så, i tilfelle stående orientering, er 100vmin
lik 100vw
, da visningsporten er mindre horisontalt enn vertikalt . Av samme grunn vil 100vmax
være lik 100vh
.
På samme måte, i tilfelle liggende orientering, er 100vmin
lik 100vh
, da visningsporten er mindre vertikalt enn horisontalt . Og selvfølgelig vil 100vmax
være lik 100vw
her.
Eksempel: Gjør helte tekster lesbare på hver skjerm
vmin
og vmax
enhetene er mye mindre allment kjent enn vw
og vh
. De kan imidlertid være utmerket brukt som en erstatning for orientering @media
spørringer . For eksempel kan vmin
og vmax
komme til nytte når du har elementer som kan se rart ut i forskjellige forhold .
Den nye koden har en flott opplæring der de diskuterer hvordan du kan holde helten tekstlesbar på hver skjerm, ved hjelp av vmin
enheten. Heltekster er tilbøyelige til å se for små på mobil og for stor på store skjermer .
Her er hovedidéen til deres løsning:
h1 {skriftstørrelse: 20vmin; font-familie: Avenir, sans-serif; font-vekt: 900; tekst-align: center; }
I Codepen-demoen kan du sjekke ut hvordan vmin
løser lesbarhetsproblemet med vmin
. Få tilgang til «Full Page» -visningen på Codepen, og endre størrelsen på nettleservinduet både horisontalt og vertikalt for å se hvordan heltteksten endres.
Nettleserstøtte
Som du kan se på CanIUse-diagrammet nedenfor, er nettleserstøtte relativt bra for visningsenheter. Vær imidlertid oppmerksom på at noen versjoner av IE og Edge ikke støtter vmax
. IOS 6 og 7 har også et problem med vh
enheten, som ble løst i iOS 8 .
Slik administrerer du din Android Smartphone fra skrivebordet
Uansett hvor avanserte smarttelefonen din er, er multitasking på det et levende mareritt. Vi er begrenset av det lille skjermbildet på en smarttelefon eller nettbrett, og det er insistert på at vi bare kan bruke en enkelt app ved enhver visning.Det er sannsynligvis lettere å administrere massevis av medier, for eksempel våre bilder, videoer og musikk på skrivebordet . Dett
Kjør og del utklipp med Glot.io
Det finnes dusinvis av nettleserbaserte IDE'er, men de fleste fokuserer på frontend-språk : HTML, CSS og JavaScript.Glot.io er en ny konkurrent, med fokus på dusinvis av programmeringsspråk som vanligvis krever runtime-programvare . Disse språkene går langt utover nettet, inkludert C #, Java, Swift, Haskell og mye mer.Glot