M

MLOG

Lietuvių

Atskleiskite CSS peržiūros srities vienetų (vw, vh, vmin, vmax, vi, vb) galią kurdami adaptyvius ir keičiamo dydžio tinklalapių maketus, kurie sklandžiai prisitaiko prie bet kurio įrenginio. Sužinokite apie praktinį pritaikymą, geriausias praktikas ir pažangias technikas.

CSS peržiūros srities vienetų įvaldymas: išsamus adaptyvaus dizaino vadovas

Nuolat kintančiame web kūrimo pasaulyje svarbiausia yra kurti adaptyvius dizainus, kurie sklandžiai prisitaiko prie įvairių ekrano dydžių. CSS peržiūros srities vienetai (vw, vh, vmin, vmax, vi ir vb) siūlo galingą būdą tai pasiekti, suteikdami lankstų ir keičiamo dydžio požiūrį į elementų dydžio nustatymą atsižvelgiant į peržiūros sritį. Šiame išsamiame vadove gilinsimės į peržiūros srities vienetų subtilybes, nagrinėsime jų funkcionalumą, praktinį pritaikymą ir geriausias įgyvendinimo praktikas.

Peržiūros srities vienetų supratimas

Peržiūros srities vienetai yra CSS santykiniai ilgio vienetai, pagrįsti naršyklės peržiūros srities dydžiu. Skirtingai nuo fiksuotų vienetų, tokių kaip pikseliai (px), kurie išlieka pastovūs nepriklausomai nuo ekrano dydžio, peržiūros srities vienetai dinamiškai koreguoja savo vertes atsižvelgiant į peržiūros srities matmenis. Dėl šio prisitaikymo jie idealiai tinka kuriant lanksčius ir adaptyvius maketus, kurie puikiai atrodo bet kokiame įrenginyje – nuo išmaniųjų telefonų iki didelių stalinių kompiuterių monitorių. Pagrindinis privalumas yra tai, kad dizainai, sukurti naudojant peržiūros srities vienetus, harmoningai keičia mastelį, išlaikydami proporcijas ir vizualinį patrauklumą esant skirtingoms ekrano raiškoms.

Pagrindiniai peržiūros srities vienetai: vw, vh, vmin, vmax

Loginiai peržiūros srities vienetai: vi, vb

Naujesni loginiai peržiūros srities vienetai, vi ir vb, yra santykiniai atitinkamai su peržiūros srities *inline* (eilutės) ir *block* (bloko) matmenimis. Šie vienetai yra jautrūs dokumento rašymo režimui ir teksto krypčiai, todėl jie ypač naudingi internacionalizuotoms svetainėms. Tai leidžia kurti maketus, kurie iš prigimties prisitaiko prie skirtingų rašymo sistemų.

Pavyzdys: Apsvarstykime svetainę, sukurtą tiek anglų (iš kairės į dešinę), tiek arabų (iš dešinės į kairę) kalboms. Naudojant vi konteinerio šoninėms paraštėms (padding arba margin), jos automatiškai prisitaikys prie teisingos pusės, atsižvelgiant į kalbos kryptį, užtikrinant nuoseklų tarpavimą nepriklausomai nuo vartotojo kalbos pasirinkimo.

Praktinis peržiūros srities vienetų pritaikymas

Peržiūros srities vienetai gali būti naudojami įvairiuose scenarijuose kuriant adaptyvius ir vizualiai patrauklius tinklalapių maketus. Štai keletas įprastų naudojimo atvejų:

1. Viso aukščio sekcijos

Sukurti viso aukščio sekcijas, kurios užima visą peržiūros sritį, yra įprastas dizaino modelis. Peržiūros srities vienetai tai padaryti leidžia neįtikėtinai lengvai:

.full-height-section {
 height: 100vh;
 width: 100vw; /* Užtikrina, kad ji užpildytų ir visą plotį */
}

Šis kodo fragmentas užtikrina, kad .full-height-section elementas visada užimtų visą peržiūros srities aukštį, nepriklausomai nuo ekrano dydžio. width: 100vw; užtikrina, kad elementas taip pat užpildytų visą plotį, sukuriant tikrai pilnos peržiūros srities sekciją.

2. Adaptyvi tipografija

Peržiūros srities vienetai gali būti naudojami kuriant adaptyvią tipografiją, kuri proporcingai keičia mastelį kartu su peržiūros srities dydžiu. Tai užtikrina, kad tekstas išliktų įskaitomas ir vizualiai patrauklus visuose įrenginiuose.

h1 {
 font-size: 8vw; /* Šrifto dydis keičiasi kartu su peržiūros srities pločiu */
}

p {
 font-size: 2vh; /* Šrifto dydis keičiasi kartu su peržiūros srities aukščiu */
}

Šiame pavyzdyje h1 elemento font-size yra nustatytas į 8vw, o tai reiškia, kad jis bus 8 % peržiūros srities pločio. Keičiantis peržiūros srities pločiui, šrifto dydis atitinkamai prisitaikys. Panašiai, p elemento font-size yra nustatytas į 2vh, keičiant mastelį kartu su peržiūros srities aukščiu.

3. Kraštinių santykio dėžutės

Išlaikyti vaizdų ir vaizdo įrašų kraštinių santykį gali būti sudėtinga, tačiau peržiūros srities vienetai, kartu su padding-top triuku, siūlo paprastą sprendimą:

.aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 kraštinių santykis (aukštis/plotis * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Ši technika naudoja pseudo-elementą (::before) su padding-top verte, apskaičiuota pagal norimą kraštinių santykį (šiuo atveju 16:9). Turinys, esantis .aspect-ratio-box viduje, yra absoliučiai pozicionuojamas, kad užpildytų visą turimą erdvę, išlaikant kraštinių santykį nepriklausomai nuo ekrano dydžio. Tai ypač naudinga įterpiant vaizdo įrašus ar paveikslėlius, kurie turi išlaikyti savo proporcijas.

4. Lanksčių tinklelio maketų kūrimas

Peržiūros srities vienetai gali būti naudojami kuriant lanksčius tinklelio maketus, kuriuose stulpeliai ir eilutės proporcingai prisitaiko prie peržiūros srities dydžio. Tai gali būti ypač naudinga kuriant informacines paneles ir kitus sudėtingus maketus.

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Kiekvienas stulpelis yra bent 20 % peržiūros srities pločio */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

Čia grid-template-columns savybė naudoja minmax(20vw, 1fr), kad užtikrintų, jog kiekvienas stulpelis būtų bent 20 % peržiūros srities pločio, bet galėtų augti, kad užpildytų visą turimą erdvę. grid-gap taip pat nustatomas naudojant 1vw, užtikrinant, kad tarpai tarp tinklelio elementų proporcingai keistųsi kartu su peržiūros srities dydžiu.

5. Adaptyvūs tarpai ir paraštės

Tarpų ir vidinių paraščių (padding) valdymas naudojant peržiūros srities vienetus užtikrina nuoseklią vizualinę harmoniją skirtinguose įrenginiuose. Tai užtikrina, kad elementai neatrodytų per daug suspausti ar per daug išsibarstę, nepriklausomai nuo ekrano dydžio.

.container {
 padding: 5vw;
 margin-bottom: 3vh;
}

Šiame pavyzdyje .container elementas turi vidinę paraštę (padding), kuri yra 5 % peržiūros srities pločio iš visų pusių, ir apatinę išorinę paraštę (margin-bottom), kuri yra 3 % peržiūros srities aukščio.

6. Keičiamo dydžio UI elementai

Mygtukai, įvesties laukai ir kiti vartotojo sąsajos (UI) elementai gali būti padaryti adaptyvesni, nustatant jų dydį naudojant peržiūros srities vienetus. Tai leidžia UI komponentams išlaikyti savo santykines proporcijas, pagerinant vartotojo patirtį skirtinguose ekranuose.

.button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

.button klasė apibrėžta su šrifto dydžiu, pagrįstu peržiūros srities aukščiu (2.5vh), ir vidine parašte (padding), pagrįsta tiek peržiūros srities aukščiu, tiek pločiu. Tai užtikrina, kad mygtuko tekstas išliktų įskaitomas, o mygtuko dydis tinkamai prisitaikytų prie skirtingų ekrano matmenų.

Geriausios peržiūros srities vienetų naudojimo praktikos

Nors peržiūros srities vienetai siūlo galingą būdą kurti adaptyvius dizainus, svarbu juos naudoti apgalvotai ir laikytis geriausių praktikų, kad išvengtumėte galimų spąstų:

1. Atsižvelkite į minimalias ir maksimalias vertes

Peržiūros srities vienetai kartais gali lemti ekstremalias vertes labai mažuose ar labai dideliuose ekranuose. Norėdami to išvengti, apsvarstykite galimybę naudoti CSS funkcijas min(), max() ir clamp(), kad nustatytumėte minimalias ir maksimalias ribas peržiūros srities vienetų vertėms.

h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Šrifto dydis yra mažiausiai 2rem, daugiausiai 5rem, o tarp šių ribų keičiasi kartu su peržiūros srities pločiu */
}

Funkcija clamp() priima tris argumentus: minimalią vertę, pageidaujamą vertę ir maksimalią vertę. Šiame pavyzdyje font-size bus mažiausiai 2rem, daugiausiai 5rem ir proporcingai keisis kartu su peržiūros srities pločiu (8vw) tarp šių ribų. Tai apsaugo tekstą nuo tapimo per mažu mažuose ekranuose arba per dideliu dideliuose ekranuose.

2. Derinkite su kitais vienetais

Peržiūros srities vienetai geriausiai veikia derinami su kitais CSS vienetais, tokiais kaip em, rem ir px. Tai leidžia sukurti subtilesnį ir lankstesnį dizainą, atsižvelgiantį tiek į peržiūros srities dydį, tiek į turinio kontekstą.

p {
 font-size: calc(1rem + 0.5vw); /* Pagrindinis šrifto dydis 1rem plius keitimosi koeficientas */
 line-height: 1.6;
}

Šiame pavyzdyje font-size apskaičiuojamas naudojant funkciją calc(), kuri prideda pagrindinį šrifto dydį 1rem prie keitimosi koeficiento 0.5vw. Tai užtikrina, kad tekstas visada būtų įskaitomas, net ir mažuose ekranuose, tuo pačiu proporcingai keičiantis kartu su peržiūros srities dydžiu.

3. Testuokite skirtinguose įrenginiuose ir naršyklėse

Kaip ir su bet kuria web kūrimo technika, labai svarbu testuoti savo dizainus įvairiuose įrenginiuose ir naršyklėse, siekiant užtikrinti suderinamumą su skirtingomis naršyklėmis ir optimalų našumą. Naudokite naršyklės kūrėjo įrankius, kad imituotumėte skirtingus ekrano dydžius ir raiškas, ir, kai tik įmanoma, testuokite savo dizainus tikruose fiziniuose įrenginiuose. Nors paprastai gerai palaikomi, tarp naršyklių gali egzistuoti subtilių skirtumų.

4. Atsižvelkite į prieinamumą

Naudodami peržiūros srities vienetus tipografijai, užtikrinkite, kad tekstas išliktų įskaitomas ir prieinamas vartotojams su negalia. Atkreipkite dėmesį į spalvų kontrastą, šrifto dydį ir eilutės aukštį, kad tekstas būtų lengvai skaitomas visiems vartotojams. Įrankiai, tokie kaip „WebAIM contrast checker“, gali būti naudingi nustatant tinkamus spalvų kontrasto santykius. Taip pat venkite nustatyti font-size ar kitas su dydžiu susijusias savybes tiesiogiai html elementui su peržiūros srities vienetais, nes tai gali trukdyti vartotojo teksto dydžio nustatymams.

5. Naudokite su CSS kintamaisiais (Custom Properties)

CSS kintamųjų (custom properties) naudojimas su peržiūros srities vienetais pagerina palaikomumą ir leidžia lengviau atlikti pakeitimus visame stilių faile.

:root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

Šiame pavyzdyje --base-padding kintamasis yra apibrėžtas su verte 2vw. Šis kintamasis tada naudojamas nustatant įvairių elementų vidines ir išorines paraštes, leidžiant lengvai koreguoti tarpus visoje svetainėje pakeičiant kintamojo vertę vienoje vietoje.

Pažangios technikos ir svarstymai

1. JavaScript naudojimas dinamiškiems pakeitimams

Tam tikrais atvejais gali prireikti dinamiškai koreguoti peržiūros srities vienetų vertes atsižvelgiant į vartotojo veiksmus ar kitus įvykius. JavaScript gali būti naudojamas norint gauti peržiūros srities matmenis ir atitinkamai atnaujinti CSS kintamuosius.

// JavaScript
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Pradinis iškvietimas

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* Atsarginis variantas 1vh, jei --vh nėra apibrėžtas */
}

Šis kodo fragmentas naudoja JavaScript, kad apskaičiuotų peržiūros srities aukštį ir atitinkamai nustatytų CSS kintamąjį (--vh). Tada .element naudoja šį kintamąjį savo aukščiui nustatyti, užtikrindamas, kad jis visada užimtų 50 % peržiūros srities aukščio. Atsarginis variantas 1vh užtikrina, kad elementas vis tiek turės protingą aukštį, net jei CSS kintamasis nėra teisingai nustatytas.

2. Mobiliosios klaviatūros matomumo valdymas

Mobiliuosiuose įrenginiuose peržiūros srities dydis gali pasikeisti, kai rodoma virtuali klaviatūra. Tai gali sukelti problemų su maketais, kurie priklauso nuo peržiūros srities vienetų viso aukščio sekcijoms. Vienas iš būdų tai sušvelninti yra naudoti didelius, mažus ir dinamiškus peržiūros srities vienetus, kurie leidžia kūrėjams nurodyti elgseną šiems scenarijams. Jie pasiekiami su lvh, svh ir dvh vienetais. dvh vienetas prisitaiko, kai rodoma programinė klaviatūra. Atkreipkite dėmesį, kad palaikymas kai kuriose senesnėse naršyklėse gali būti ribotas.

.full-height-section {
 height: 100dvh;
}

3. Našumo optimizavimas

Nors peržiūros srities vienetai paprastai yra našūs, per didelis jų naudojimas gali potencialiai paveikti puslapio atvaizdavimo greitį. Norėdami optimizuoti našumą, venkite naudoti peržiūros srities vienetus kiekvienam elementui savo puslapyje. Vietoj to, sutelkite dėmesį į jų strategišką naudojimą pagrindiniams maketo komponentams ir tipografijai. Taip pat sumažinkite peržiūros srities vienetų verčių perskaičiavimo kartų skaičių JavaScript'e.

Pavyzdžiai iš skirtingų šalių ir kultūrų

Peržiūros srities vienetų grožis yra tas, kad jie padeda sukurti nuoseklią vartotojo patirtį įvairiose vietovėse. Panagrinėkime, kaip peržiūros srities vienetai gali būti pritaikyti atsižvelgiant į kultūrinius ypatumus:

Išvada

CSS peržiūros srities vienetai yra nepakeičiamas įrankis kuriant tikrai adaptyvius ir keičiamo dydžio web dizainus, kurie sklandžiai prisitaiko prie bet kurio įrenginio. Suprasdami vw, vh, vmin, vmax, vi ir vb funkcionalumą bei laikydamiesi geriausių praktikų, galite atskleisti visą peržiūros srities vienetų potencialą ir sukurti vizualiai patrauklias bei patogias naudoti svetaines, kurios suteikia nuoseklią patirtį visose platformose. Pasinaudokite šiais vienetais, kad sukurtumėte web patirtis, kurios būtų globaliai prieinamos ir estetiškai malonios, nepriklausomai nuo vartotojo įrenginio ar kultūrinės aplinkos.

Nepamirškite kruopščiai testuoti skirtingose naršyklėse ir įrenginiuose bei visada teikti pirmenybę prieinamumui, kad užtikrintumėte, jog jūsų dizainai būtų įtraukiantys ir naudojami visiems.