CSS-i vaateakna ühikute variandid: vaateakna suuruse meisterlik kasutamine reageerivas disainis

Pidevalt areneval veebiarenduse maastikul on tõeliselt reageerivate ja dünaamiliste veebisaitide loomine esmatähtis. Möödas on ajad, mil staatilised paigutused sobisid vaid käputäiele ekraanisuurustele. Kaasaegne veebidisain nõuab paindlikkust, kohanemisvõimet ja sujuvat kasutajakogemust laias valikus seadmetes, alates nutitelefonidest ja tahvelarvutitest kuni sülearvutite ja suurte lauaarvutimonitorideni.

CSS-i vaateakna ühikute variandid pakuvad võimsa tööriistakomplekti selle reageerivuse saavutamiseks. Need ühikud, mis on seotud vaateakna (brauseriakna nähtava ala) suurusega, võimaldavad teil luua elemente ja paigutusi, mis skaleeruvad arukalt ja proportsionaalselt, tagades järjepideva ja visuaalselt meeldiva kogemuse kõigile kasutajatele, olenemata nende seadmest.

Vaateakna ühikute mõistmine: alused

Enne iga variandi nüanssidesse süvenemist loome alusmõistmise põhikontseptsioonist: vaateakna ühikutest.

Vaateakna ühikud on suhtelised pikkusühikud, mis põhinevad vaateakna mõõtmetel. Erinevalt absoluutsetest ühikutest nagu pikslid (px) või suhtelistest ühikutest nagu em-id (em), on vaateakna ühikud otseselt seotud brauseriakna suurusega. See tähendab, et nende väärtused kohanduvad automaatselt, kui vaateaken muutub, näiteks kui kasutaja muudab oma brauseriakna suurust või pöörab oma mobiilseadet.

Peamised vaateakna ühikud on:

• vw (viewport width ehk vaateakna laius): Esindab 1% vaateakna laiusest. Näiteks 100vw on võrdne kogu vaateakna laiusega.
• vh (viewport height ehk vaateakna kõrgus): Esindab 1% vaateakna kõrgusest. Näiteks 50vh on võrdne poolega vaateakna kõrgusest.

Need kaks ühikut moodustavad aluse paljudele reageeriva disaini tehnikatele. Need võimaldavad teil luua elemente, mis säilitavad oma proportsioonid võrreldes ekraani suurusega.

Näide: Kujutage ette esilehe pilti, mis katab kogu ekraani laiuse. Selle saavutaksite järgmise CSS-iga:

            .hero-image {
  width: 100vw;
  height: 50vh; /* Pool ekraani kõrgusest */
  object-fit: cover; /* Tagab, et pilt täidab ala moonutusteta */
}

            

              
                Copy
              
            
          

Uute tegijate tutvustus: vi, vb, vmin ja vmax

Kuigi vw ja vh on laialdaselt kasutusel, pakub CSS veelgi peenemat kontrolli vi, vb, vmin ja vmax kasutuselevõtuga. Need ühikud käsitlevad vaateakna suuruse erinevaid aspekte ja võivad olla konkreetsetes stsenaariumides uskumatult kasulikud.

• vi (viewport inline size ehk vaateakna reasisene suurus): Esindab 1% vaateakna reasisesest suurusest, mis on laius horisontaalses kirjaviisis (nagu eesti keel) ja kõrgus vertikaalses kirjaviisis (nagu jaapani või mongoli keel). Mõelge sellest kui sisu vooluga kohanemisest.
• vb (viewport block size ehk vaateakna ploki suurus): Esindab 1% vaateakna ploki suurusest, mis on kõrgus horisontaalses kirjaviisis ja laius vertikaalses kirjaviisis. Sisuliselt on see reasisese suurusega risti olev mõõde.
• vmin (viewport minimum ehk vaateakna miinimum): Esindab väiksemat väärtust vw ja vh vahel. See ühik on äärmiselt kasulik elementide loomiseks, mis peaksid alati mahtuma nähtavasse vaateaknasse, olenemata selle orientatsioonist.
• vmax (viewport maximum ehk vaateakna maksimum): Esindab suuremat väärtust vw ja vh vahel. See on abiks elementide puhul, mis peaksid alati täitma kogu vaateakna vähemalt ühes mõõtmes.

vi ja vb kasutusjuhud

vi ja vb muutuvad eriti oluliseks rahvusvahelistamisega (i18n) ja lokaliseerimisega (l10n) tegelemisel. Veebisaidid, mis toetavad mitut keelt, eriti neid, millel on erinevad kirjaviisid (vasakult paremale vs. paremalt vasakule vs. ülevalt alla), saavad neist ühikutest suurt kasu.

Näide: Kujutage ette fikseeritud laiusega navigeerimisriba. Vasakult paremale keeles võiksite laiuse määrata vw abil. Kuid paremalt vasakule keeles võib navigeerimisriba paigutus vajada kohandusi. vi kasutamine tagab, et navigeerimisriba kohandub kirjaviisiga korrektselt.

            .navigation {
  width: 20vi; /* Kohandub reasisese suurusega (laius LTR-is, kõrgus RTL-is) */
  /* Muu stiilimine... */
}

            

              
                Copy
              
            
          

vmin ja vmax kasutamine kohanduvate elementide jaoks

vmin ja vmax pakuvad unikaalseid võimalusi elementide loomiseks, mis reageerivad arukalt erinevatele vaateakna orientatsioonidele (portree vs. maastik).

Näide: Kujutage ette ruudukujulist elementi, mille puhul soovite säilitada selle kuju ja mis mahuks alati täielikult vaateaknasse. Selle saavutate vmin abil:

            .square {
  width: 50vmin; /* Tagab, et laius on alati 50% vaateakna väiksemast mõõtmest */
  height: 50vmin; /* Säilitab ruudu kuvasuhte */
  background-color: #007bff; /* Näidisvärv */
}

            

              
                Copy
              
            
          

Sel juhul on ruudu laius ja kõrgus alati 50% vaateakna laiusest ja kõrgusest väiksemast. See tagab, et ruut jääb täielikult nähtavale, olenemata sellest, kas vaateaken on portree- või maastikurežiimis.

Näide: vmax-i saab kasutada tagamaks, et taust katab kogu vaateakna, isegi kui see tähendab kerget kärpimist ühel teljel:

            .full-background {
 width: 100vmax; 
 height: 100vmax;
 object-fit: cover;
 object-position: center;
}

            

              
                Copy
              
            
          

Dünaamiline vaateaken: mobiilibrauserite eripäradega tegelemine (lvw, svw, dvw)

Mobiilibrauserid toovad kaasa vaateaknaga seotud keerukusi. Aadressiriba ja muud kasutajaliidese elemendid võivad dünaamiliselt ilmuda ja kaduda, mõjutades saadaolevat vaateakna kõrgust. See võib põhjustada paigutusprobleeme, eriti kui tuginetakse tugevalt vh-le.

Nende väljakutsetega toimetulekuks tutvustab CSS dünaamilisi vaateakna ühikuid: lvw, svw ja dvw.

• lvw (large viewport width ehk suure vaateakna laius): Esindab 1% suurimast võimalikust vaateakna suurusest, kui kõik brauseri kasutajaliidese elemendid on sisse tõmmatud (nt aadressiriba peidetud).
• svw (small viewport width ehk väikese vaateakna laius): Esindab 1% väikseimast võimalikust vaateakna suurusest, kui kõik brauseri kasutajaliidese elemendid on nähtaval (nt aadressiriba täielikult kuvatud).
• dvw (dynamic viewport width ehk dünaamilise vaateakna laius): Esindab 1% hetke vaateakna suurusest, mis kohandub dünaamiliselt, kui brauseri kasutajaliidese elemendid ilmuvad ja kaovad.

Kõrguse jaoks on olemas vastavad ühikud: lvh, svh ja dvh.

Probleem: Kujutage ette täiskõrgusega (100vh) elementi mobiilseadmes. Kui kasutaja kerib alla ja aadressiriba tõmbub sisse, suureneb vaateakna kõrgus. Element, mis on endiselt seatud väärtusele 100vh, võib siis ületada nähtava ala, põhjustades ootamatut kerimist või paigutuse purunemist.

Lahendus: Kasutage vh asemel dvh-d. dvh kohandub dünaamiliselt, kui aadressiriba ilmub ja kaob, tagades, et element mahub alati hetkel nähtavasse vaateaknasse.

Näide: Täisekraani esilehe jaotis mobiilisaidil:

            .hero {
  width: 100vw;
  height: 100dvh; /* Kohandub dünaamiliselt vaateakna kõrguse muutustega */
  background-image: url('hero-image.jpg');
  background-size: cover;
  background-position: center;
}

            

              
                Copy
              
            
          

Millal kasutada lvw, svw ja dvw:

• lvw/lvh: Kasutage siis, kui soovite, et element hõivaks alati maksimaalse võimaliku vaateakna suuruse, isegi kui kasutajaliidese elemendid on peidetud. Olge ettevaatlik, sest see võib põhjustada sisu osalist varjamist, kui kasutajaliidese elemendid on nähtaval.
• svw/svh: Kasutage siis, kui soovite tagada, et element oleks alati täielikult nähtav, isegi kui kasutajaliidese elemendid on täielikult kuvatud. See võib põhjustada elemendi oodatust väiksemana näimist, kui kasutajaliidese elemendid on peidetud.
• dvw/dvh: Kõige levinum ja soovitatavam valik. Pakub tasakaalu, kohandudes dünaamiliselt hetke vaateakna suurusega, pakkudes sujuvamat ja järjepidevamat kasutajakogemust.

Praktilised näited ja parimad tavad

Vaatame mõningaid praktilisi näiteid, mis demonstreerivad, kuidas vaateakna ühikute variante reaalsetes stsenaariumides tõhusalt kasutada.

1. Reageeriva navigeerimisriba loomine

Navigeerimisriba, mis kohandub erinevate ekraanisuurustega, on hea kasutajakogemuse jaoks ülioluline. Saame kasutada vaateakna ühikuid navigeerimisüksuste suuruse ja vahede kontrollimiseks.

            .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw; /* Vertikaalne polsterdus põhineb vaateakna kõrgusel, horisontaalne vaateakna laiusel */
  background-color: #f8f9fa;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 2vw; /* Vahe navigeerimislinkide vahel */
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 1.2em; /* em-ühikute kasutamine fondi suuruse jaoks võimaldab edasist skaleerimist juurfondi suuruse alusel */
}

            

              
                Copy
              
            
          

2. Paindliku võrgustiku paigutuse kujundamine

Vaateakna ühikuid saab kasutada paindlike võrgustiku paigutuste loomiseks, mis kohanduvad erinevate ekraanisuurustega. Fikseeritud pikslilaiuste asemel kasutage ruumi proportsionaalseks jaotamiseks vw või fr (CSS Grid'i murdosa ühik).

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Iga veerg võtab vähemalt 20% vaateakna laiusest, kuid võib laieneda vaba ruumi täitmiseks */
  gap: 1vw;
}

.grid-item {
  padding: 1em;
  background-color: #e9ecef;
}

            

              
                Copy
              
            
          

3. Reageerivalt skaleeruva tüpograafia rakendamine

Fondi suurused peaksid samuti kohanduma erinevate ekraanisuurustega, et säilitada loetavus. vw kasutamine fondisuuruste jaoks võib luua reageeriva tüpograafiasüsteemi.

            h1 {
  font-size: 5vw; /* Fondi suurus on proportsionaalne vaateakna laiusega */
  margin-bottom: 1vh;
}

p {
  font-size: 2vw; /* Fondi suurus on proportsionaalne vaateakna laiusega */
  line-height: 1.6;
}

            

              
                Copy
              
            
          

Oluline märkus: Kuigi vw-põhised fondisuurused pakuvad reageerivust, võivad need mõnikord viia äärmuslike ekraanisuuruste korral liiga suure või väikese tekstini. Kaaluge clamp() funktsiooni kasutamist minimaalse ja maksimaalse fondisuuruse määramiseks.

            h1 {
  font-size: clamp(2rem, 5vw, 4rem); /* Miinimum 2rem, skaleerub kuni 5vw, maksimum 4rem */
}

            

              
                Copy
              
            
          

4. Täisekraani jaotiste loomine dünaamilise kõrgusega

Nagu varem demonstreeritud, looge elemente, mis katavad kogu vaateakna kõrguse, arvestades mobiilibrauseri kasutajaliidest.

            .full-screen-section {
  width: 100vw;
  height: 100dvh; /* Kohandub dünaamiliselt vaateakna kõrgusega */
  display: flex;
  justify-content: center;
  align-items: center;
}

            

              
                Copy
              
            
          

Brauseriteülene ühilduvus ja varulahendused

Kuigi enamik kaasaegseid brausereid toetab vaateakna ühikute variante, on oluline arvestada brauseriteülese ühilduvusega. Vanemad brauserid ei pruugi täielikult toetada kõiki uuemaid ühikuid (lvw, svw, dvw, vi, vb).

Parimad tavad brauseriteülese ühilduvuse tagamiseks:

• Progressiivne täiustamine: Kasutage vaateakna ühikute variante peamise suuruse määramise mehhanismina, kuid pakkuge vanematele brauseritele varulahendusi, kasutades absoluutseid või suhtelisi ühikuid.
• CSS-i funktsioonipäringud: Kasutage @supports-i, et tuvastada brauseri tuge konkreetsetele vaateakna ühikute variantidele ja rakendada stiile vastavalt.
• Polüfillid: Kaaluge polüfillide (JavaScripti teekide) kasutamist, et pakkuda vanemates brauserites puuduvate funktsioonide tuge. Siiski olge teadlik lisa-JavaScripti lisamisega kaasnevast jõudlusmõjust.

Näide CSS-i funktsioonipäringutega:

            .element {
  width: 50vw; /* Kaasaegsed brauserid kasutavad seda */
}

@supports not (width: 50vw) {
  .element {
    width: 50%; /* Varulahendus vanematele brauseritele */
  }
}

            

              
                Copy
              
            
          

Juurdepääsetavuse kaalutlused

Vaateakna ühikute variantide kasutamisel on ülioluline arvestada juurdepääsetavusega. Veenduge, et teie disainid oleksid kasutatavad ja arusaadavad ka puuetega inimestele.

Peamised juurdepääsetavuse kaalutlused:

• Teksti suurus ja suumimine: Lubage kasutajatel lehte sisse ja välja suumida ilma paigutust lõhkumata. Vältige vaateakna ühikute kasutamist ainult fondisuuruste jaoks; selle asemel kombineerige neid suhteliste ühikutega nagu em või rem.
• Kontrastsus: Tagage piisav kontrastsus teksti ja taustavärvide vahel, eriti kui kasutate värviväärtuste kontrollimiseks vaateakna ühikuid.
• Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid on klaviatuuriga navigeerimise kaudu juurdepääsetavad. Vaateakna ühikud ei tohiks häirida fookuse järjekorda ega klaviatuuri funktsionaalsust.
• Ekraanilugeja ühilduvus: Testige oma disaine ekraanilugejatega, et tagada sisu korrektne ettelugemine ja interaktiivsete elementide juurdepääsetavus.

Vaateakna suuruse määramise tulevik

lvw, svw ja dvw kasutuselevõtt annab märku jätkuvast püüdlusest lahendada reageeriva disaini väljakutseid mobiil-eelkõige maailmas. Veebiarenduse arenedes võime oodata edasisi täiustusi ja uuendusi vaateakna suuruse määramise tehnikates.

Uusimate CSS-i spetsifikatsioonide ja parimate tavadega kursis olemine on kaasaegsete, juurdepääsetavate ja kasutajasõbralike veebisaitide loomisel ülioluline.

Kokkuvõte: vaateakna ühikute variantide meisterlik kasutamine reageerivas veebidisainis

CSS-i vaateakna ühikute variandid on asendamatud tööriistad reageerivate ja dünaamiliste veebidisainide loomiseks. Mõistes vw, vh, vi, vb, vmin, vmax, lvw, svw ja dvw nüansse, saate luua paigutusi, mis kohanduvad sujuvalt kõikide seadmete ja ekraanisuurustega.

Võtke need võimsad ühikud omaks, katsetage erinevate tehnikatega ja seadke esikohale juurdepääsetavus, et luua erakordseid veebikogemusi kasutajatele üle maailma. Arvestades veebi globaalset olemust ja oma sihtrühma mitmekesiseid vajadusi, saate luua veebisaite, mis pole mitte ainult visuaalselt meeldivad, vaid ka kaasavad ja kõigile kättesaadavad.