CSS skatloga mērvienību apgūšana: visaptveroša rokasgrāmata adaptīvajam dizainam

Nepārtraukti mainīgajā tīmekļa izstrādes pasaulē ir ļoti svarīgi izveidot adaptīvus dizainus, kas nevainojami pielāgojas dažādiem ekrānu izmēriem. CSS skatloga mērvienības (vw, vh, vmin, vmax, vi un vb) piedāvā jaudīgu veidu, kā to sasniegt, nodrošinot elastīgu un mērogojamu pieeju elementu izmērošanai attiecībā pret skatlogu. Šajā visaptverošajā rokasgrāmatā mēs iedziļināsimies skatloga mērvienību smalkumos, izpētot to funkcionalitāti, praktiskos pielietojumus un labākās ieviešanas prakses.

Izpratne par skatloga mērvienībām

Skatloga mērvienības ir CSS relatīvā garuma mērvienības, kas balstās uz pārlūkprogrammas skatloga izmēru. Atšķirībā no fiksētām mērvienībām, piemēram, pikseļiem (px), kas paliek nemainīgi neatkarīgi no ekrāna izmēra, skatloga mērvienības dinamiski pielāgo savas vērtības, pamatojoties uz skatloga izmēriem. Šī pielāgojamība padara tās ideāli piemērotas plūstošu un adaptīvu izkārtojumu izveidei, kas izskatās lieliski jebkurā ierīcē, sākot no viedtālruņiem līdz lieliem galddatoru monitoriem. Galvenā priekšrocība ir tā, ka ar skatloga mērvienībām veidoti dizaini mērogojas harmoniski, saglabājot proporcijas un vizuālo pievilcību dažādās ekrāna izšķirtspējās.

Galvenās skatloga mērvienības: vw, vh, vmin, vmax

• vw (Skatloga platums): Apzīmē 1% no skatloga platuma. Piemēram, 10vw ir vienāds ar 10% no skatloga platuma.
• vh (Skatloga augstums): Apzīmē 1% no skatloga augstuma. Līdzīgi, 50vh ir vienāds ar 50% no skatloga augstuma.
• vmin (Skatloga minimums): Apzīmē mazāko vērtību starp vw un vh. Ja skatlogs ir platāks nekā augsts, vmin būs vienāds ar vh. Un otrādi, ja skatlogs ir augstāks nekā plats, vmin būs vienāds ar vw. Tas ir noderīgi proporciju uzturēšanai, īpaši kvadrātveida vai gandrīz kvadrātveida elementos.
• vmax (Skatloga maksimums): Apzīmē lielāko vērtību starp vw un vh. Ja skatlogs ir platāks nekā augsts, vmax būs vienāds ar vw. Ja skatlogs ir augstāks nekā plats, vmax būs vienāds ar vh. To bieži izmanto, ja vēlaties, lai elements aizpildītu lielāko iespējamo skatloga dimensiju.

Loģiskās skatloga mērvienības: vi, vb

Jaunākās loģiskās skatloga mērvienības, vi un vb, ir attiecīgi saistītas ar skatloga *inline* un *block* dimensijām. Šīs mērvienības ir jutīgas pret dokumenta rakstīšanas režīmu un teksta virzienu, padarot tās īpaši noderīgas internacionalizētām vietnēm. Tas ļauj izveidot izkārtojumus, kas pēc būtības ir pielāgojami dažādām rakstīšanas sistēmām.

• vi (Skatloga Inline): Apzīmē 1% no skatloga inline izmēra, kas ir virziens, kurā saturs plūst horizontāli (piemēram, no kreisās uz labo pusi lielākajā daļā Rietumu valodu). Rakstīšanas režīmā no kreisās uz labo pusi vi darbojas līdzīgi kā vw. Tomēr rakstīšanas režīmā no labās uz kreiso pusi (piemēram, arābu vai ebreju valodā) vi joprojām apzīmē horizontālo dimensiju, bet sākas no skatloga labās malas.
• vb (Skatloga bloks): Apzīmē 1% no skatloga bloka izmēra, kas ir virziens, kurā saturs plūst vertikāli. Tas ir analogs vh lielākajā daļā izplatītāko rakstīšanas režīmu.

Piemērs: Apskatīsim vietni, kas paredzēta gan angļu (no kreisās uz labo pusi), gan arābu (no labās uz kreiso pusi) valodai. Izmantojot vi konteinera sānu polsterējumam vai atkāpei, tas automātiski pielāgosies pareizajai pusei, pamatojoties uz valodas virzienu, nodrošinot konsekventu atstarpi neatkarīgi no lietotāja valodas izvēles.

Skatloga mērvienību praktiskie pielietojumi

Skatloga mērvienības var izmantot dažādos scenārijos, lai izveidotu adaptīvus un vizuāli pievilcīgus tīmekļa izkārtojumus. Šeit ir daži izplatīti lietošanas gadījumi:

1. Pilna augstuma sadaļas

Pilna augstuma sadaļu izveide, kas aptver visu skatlogu, ir izplatīts dizaina modelis. Skatloga mērvienības to padara neticami vieglu:

.full-height-section {
 height: 100vh;
 width: 100vw; /* Nodrošina, ka tas aizpilda arī pilnu platumu */
}

Šis koda fragments nodrošina, ka .full-height-section elements vienmēr aizņem visu skatloga augstumu, neatkarīgi no ekrāna izmēra. width: 100vw; nodrošina, ka elements aizpilda arī visu platumu, izveidojot patiesi pilna skatloga sadaļu.

2. Adaptīva tipogrāfija

Skatloga mērvienības var izmantot, lai izveidotu adaptīvu tipogrāfiju, kas mērogojas proporcionāli skatloga izmēram. Tas nodrošina, ka teksts paliek salasāms un vizuāli pievilcīgs visās ierīcēs.

h1 {
 font-size: 8vw; /* Fonta lielums mērogojas ar skatloga platumu */
}

p {
 font-size: 2vh; /* Fonta lielums mērogojas ar skatloga augstumu */
}

Šajā piemērā h1 elementa font-size ir iestatīts uz 8vw, kas nozīmē, ka tas būs 8% no skatloga platuma. Mainoties skatloga platumam, attiecīgi pielāgosies arī fonta lielums. Līdzīgi, p elementa font-size ir iestatīts uz 2vh, mērogojoties ar skatloga augstumu.

3. Malu attiecību kastes

Attēlu un video malu attiecību uzturēšana var būt sarežģīta, bet skatloga mērvienības, apvienojumā ar padding-top triku, nodrošina vienkāršu risinājumu:

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

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 malu attiecība (augstums/platums * 100) */
}

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

Šī tehnika izmanto pseidoelementu (::before) ar padding-top vērtību, kas aprēķināta, pamatojoties uz vēlamo malu attiecību (šajā gadījumā 16:9). Saturs .aspect-ratio-box iekšpusē tiek absolūti pozicionēts, lai aizpildītu pieejamo vietu, saglabājot malu attiecību neatkarīgi no ekrāna izmēra. Tas ir ļoti noderīgi, iegulstot video vai attēlus, kuriem jāsaglabā savas proporcijas.

4. Plūstošu režģa izkārtojumu veidošana

Skatloga mērvienības var izmantot, lai izveidotu plūstošus režģa izkārtojumus, kur kolonnas un rindas pielāgojas proporcionāli skatloga izmēram. Tas var būt īpaši noderīgi, veidojot informācijas paneļus un citus sarežģītus izkārtojumus.

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Katra kolonna ir vismaz 20% no skatloga platuma */
 grid-gap: 1vw;
}

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

Šeit grid-template-columns īpašība izmanto minmax(20vw, 1fr), lai nodrošinātu, ka katra kolonna ir vismaz 20% no skatloga platuma, bet var augt, lai aizpildītu pieejamo vietu. Arī grid-gap ir iestatīts, izmantojot 1vw, nodrošinot, ka atstarpe starp režģa elementiem mērogojas proporcionāli skatloga izmēram.

5. Adaptīvas atstarpes un polsterējums

Atstarpju un polsterējuma kontrole ar skatloga mērvienībām nodrošina konsekventu vizuālo harmoniju dažādās ierīcēs. Tas nodrošina, ka elementi neizskatās pārāk saspiesti vai pārāk izkliedēti, neatkarīgi no ekrāna izmēra.

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

Šajā piemērā .container elementam ir polsterējums, kas ir 5% no skatloga platuma no visām pusēm, un apakšējā atkāpe, kas ir 3% no skatloga augstuma.

6. Mērogojami lietotāja saskarnes elementi

Pogas, ievades laukus un citus lietotāja saskarnes elementus var padarīt adaptīvākus, izmērojot tos, izmantojot skatloga mērvienības. Tas ļauj lietotāja saskarnes komponentiem saglabāt savas relatīvās proporcijas, uzlabojot lietotāja pieredzi dažādos ekrānos.

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

Klase .button ir definēta ar fonta lielumu, kas balstīts uz skatloga augstumu (2.5vh), un polsterējumu, kas balstīts gan uz skatloga augstumu, gan platumu. Tas nodrošina, ka pogas teksts paliek salasāms un pogas izmērs atbilstoši pielāgojas dažādiem ekrāna izmēriem.

Labākās prakses skatloga mērvienību lietošanai

Lai gan skatloga mērvienības piedāvā jaudīgu veidu, kā izveidot adaptīvus dizainus, ir svarīgi tās lietot apdomīgi un ievērot labākās prakses, lai izvairītos no iespējamām problēmām:

1. Apsveriet minimālās un maksimālās vērtības

Skatloga mērvienības dažkārt var radīt ekstrēmas vērtības ļoti mazos vai ļoti lielos ekrānos. Lai to novērstu, apsveriet iespēju izmantot CSS funkcijas min(), max() un clamp(), lai iestatītu minimālās un maksimālās robežas skatloga mērvienību vērtībām.

h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Fonta lielums ir vismaz 2rem, lielākais 5rem, un starp tiem mērogojas ar skatloga platumu */
}

Funkcija clamp() pieņem trīs argumentus: minimālo vērtību, vēlamo vērtību un maksimālo vērtību. Šajā piemērā font-size būs vismaz 2rem, ne vairāk kā 5rem, un starp šīm robežām tas mērogosies proporcionāli skatloga platumam (8vw). Tas novērš teksta kļūšanu pārāk mazu uz maziem ekrāniem vai pārāk lielu uz lieliem ekrāniem.

2. Kombinējiet ar citām mērvienībām

Skatloga mērvienības vislabāk darbojas, ja tās tiek kombinētas ar citām CSS mērvienībām, piemēram, em, rem un px. Tas ļauj jums izveidot niansētāku un elastīgāku dizainu, kas ņem vērā gan skatloga izmēru, gan satura kontekstu.

p {
 font-size: calc(1rem + 0.5vw); /* Bāzes fonta lielums 1rem plus mērogošanas faktors */
 line-height: 1.6;
}

Šajā piemērā font-size tiek aprēķināts, izmantojot funkciju calc(), kas pievieno bāzes fonta lielumu 1rem mērogošanas faktoram 0.5vw. Tas nodrošina, ka teksts vienmēr ir salasāms, pat uz maziem ekrāniem, vienlaikus joprojām mērogojoties proporcionāli skatloga izmēram.

3. Testējiet uz dažādām ierīcēm un pārlūkprogrammām

Tāpat kā ar jebkuru tīmekļa izstrādes tehniku, ir ļoti svarīgi testēt savus dizainus uz dažādām ierīcēm un pārlūkprogrammām, lai nodrošinātu starppārlūku saderību un optimālu veiktspēju. Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai simulētu dažādus ekrāna izmērus un izšķirtspējas, un, ja iespējams, testējiet savus dizainus uz reālām fiziskām ierīcēm. Lai gan tās parasti ir labi atbalstītas, starp pārlūkprogrammām var pastāvēt nelielas atšķirības.

4. Apsveriet pieejamību

Izmantojot skatloga mērvienības tipogrāfijai, nodrošiniet, lai teksts paliek salasāms un pieejams lietotājiem ar invaliditāti. Pievērsiet uzmanību krāsu kontrastam, fonta lielumam un rindas augstumam, lai nodrošinātu, ka teksts ir viegli lasāms visiem lietotājiem. Rīki, piemēram, WebAIM kontrasta pārbaudītājs, var būt noderīgi, lai noteiktu atbilstošas krāsu kontrasta attiecības. Tāpat izvairieties iestatīt font-size vai citas ar izmēru saistītas īpašības tieši html elementam ar skatloga mērvienībām, jo tas var traucēt lietotāja iestatījumiem teksta izmērošanai.

5. Izmantojiet ar CSS mainīgajiem (pielāgotajām īpašībām)

CSS mainīgo (pielāgoto īpašību) izmantošana ar skatloga mērvienībām uzlabo uzturējamību un ļauj vieglāk veikt korekcijas visā jūsu stila lapā.

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

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

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

Šajā piemērā mainīgais --base-padding ir definēts ar vērtību 2vw. Šis mainīgais tiek izmantots, lai iestatītu dažādu elementu polsterējumu un atkāpi, ļaujot jums viegli pielāgot atstarpes visā vietnē, mainot mainīgā vērtību vienā vietā.

Progresīvas tehnikas un apsvērumi

1. JavaScript izmantošana dinamiskām korekcijām

Dažos scenārijos jums var būt nepieciešams dinamiski pielāgot skatloga mērvienību vērtības, pamatojoties uz lietotāja mijiedarbību vai citiem notikumiem. JavaScript var izmantot, lai piekļūtu skatloga izmēriem un atbilstoši atjauninātu CSS mainīgos.

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

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Sākotnējais izsaukums

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* Rezerves variants 1vh, ja --vh nav definēts */
}

Šis koda fragments izmanto JavaScript, lai aprēķinātu skatloga augstumu un atbilstoši iestatītu CSS mainīgo (--vh). Tad .element izmanto šo mainīgo, lai iestatītu savu augstumu, nodrošinot, ka tas vienmēr aizņem 50% no skatloga augstuma. Rezerves variants 1vh nodrošina, ka elementam joprojām ir saprātīgs augstums pat tad, ja CSS mainīgais nav pareizi iestatīts.

2. Mobilo ierīču tastatūras redzamības apstrāde

Mobilajās ierīcēs skatloga izmērs var mainīties, kad tiek parādīta virtuālā tastatūra. Tas var radīt problēmas ar izkārtojumiem, kas paļaujas uz skatloga mērvienībām pilna augstuma sadaļām. Viena pieeja, kā to mazināt, ir izmantot lielās, mazās un dinamiskās skatloga mērvienības, kas ļauj izstrādātājiem norādīt uzvedību šajos scenārijos. Tās ir pieejamas ar lvh, svh un dvh mērvienībām. dvh mērvienība pielāgojas, kad tiek parādīta programmatūras tastatūra. Ņemiet vērā, ka atbalsts dažās vecākās pārlūkprogrammās var būt ierobežots.

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

3. Veiktspējas optimizēšana

Lai gan skatloga mērvienības parasti ir veiktspējīgas, to pārmērīga lietošana var potenciāli ietekmēt lapas renderēšanas ātrumu. Lai optimizētu veiktspēju, izvairieties no skatloga mērvienību izmantošanas katram atsevišķam lapas elementam. Tā vietā koncentrējieties uz to stratēģisku izmantošanu galvenajiem izkārtojuma komponentiem un tipogrāfijai. Tāpat samaziniet reižu skaitu, kad pārrēķināt skatloga mērvienību vērtības JavaScript.

Piemēri dažādās valstīs un kultūrās

Skatloga mērvienību skaistums ir tas, ka tās palīdz radīt konsekventu lietotāja pieredzi dažādās vietās. Apskatīsim, kā skatloga mērvienības var piemērot, ņemot vērā kultūras apsvērumus:

• Austrumāzijas valodas (piem., ķīniešu, japāņu, korejiešu): Šajās valodās bieži ir nepieciešami lielāki fontu izmēri rakstzīmju sarežģītības dēļ. Skatloga mērvienības nodrošina lasāmību mobilajās ierīcēs, kur ekrāna platība ir ierobežota. Īpaši noderīga var būt clamp() izmantošana ar lielāku minimālo fonta izmēru, kas balstīts uz rem mērvienībām, līdzās vw.
• Valodas ar rakstību no labās uz kreiso pusi (piem., arābu, ebreju): Loģiskās skatloga mērvienības (vi, vb) ir nenovērtējamas, lai uzturētu konsekventu izkārtojuma virzienu un atstarpes, īpaši strādājot ar spoguļattēla izkārtojumiem un pielāgotu satura plūsmu.
• Valstis ar mainīgu interneta ātrumu: Attēlu izmēru optimizēšana un ātras ielādes laika nodrošināšana ir ļoti svarīga. Malu attiecību kastes, kas izveidotas ar skatloga mērvienībām, ļauj attēliem un video saglabāt savas proporcijas, vienlaikus pielāgojoties mazākiem failu izmēriem ātrākai ielādei lēnākos savienojumos.
• Pieejamība dažādās kultūrās: rem kombinācijas izmantošana bāzes fonta izmēram un vw mērogošanai nodrošina elastību lietotājiem, lai viņi varētu ignorēt izmērošanu atbilstoši savām individuālajām vajadzībām neatkarīgi no viņu ģeogrāfiskās atrašanās vietas vai kultūras konteksta. Iespēju nodrošināšana lietotājiem pielāgot fontu izmērus ir vispārēji noderīga.

Noslēgums

CSS skatloga mērvienības ir neaizstājams rīks patiesi adaptīvu un mērogojamu tīmekļa dizainu izveidei, kas nevainojami pielāgojas jebkurai ierīcei. Izprotot vw, vh, vmin, vmax, vi un vb funkcionalitāti un ievērojot labākās prakses, jūs varat atraisīt pilnu skatloga mērvienību potenciālu un izveidot vizuāli pievilcīgas un lietotājam draudzīgas vietnes, kas nodrošina konsekventu pieredzi visās platformās. Izmantojiet šīs mērvienības, lai veidotu tīmekļa pieredzi, kas ir globāli pieejama un estētiski patīkama neatkarīgi no lietotāja ierīces vai kultūras fona.

Atcerieties rūpīgi testēt dažādās pārlūkprogrammās un ierīcēs un vienmēr par prioritāti izvirzīt pieejamību, lai nodrošinātu, ka jūsu dizaini ir iekļaujoši un lietojami visiem.