M

MLOG

Lietuvių

Sužinokite, kaip panaudoti CSS aplinkos kintamuosius, tokius kaip saugios srities ir peržiūros lauko vienetai, kuriant globaliai jautrius ir pritaikomus tinklalapių dizainus įvairiems įrenginiams.

CSS aplinkos kintamųjų įvaldymas: saugios srities ir peržiūros lauko pritaikymas globaliam jautrumui

Nuolat besikeičiančiame interneto svetainių kūrimo pasaulyje, sukurti tikrai jautrius ir pritaikomus dizainus yra svarbiausia. Svetainės ir interneto programos turi grakščiai tvarkytis su daugybe ekrano dydžių, įrenginių orientacijų ir unikalių aparatinės įrangos savybių. CSS aplinkos kintamieji suteikia galingą mechanizmą tai pasiekti, siūlydami prieigą prie konkretaus įrenginio informacijos tiesiogiai jūsų stilių aprašuose. Tai leidžia dinamiškai koreguoti išdėstymus ir elementus, užtikrinant optimalią vartotojo patirtį, nepriklausomai nuo įrenginio, kuriuo pasiekiamas jūsų turinys.

Šis išsamus vadovas gilinsis į CSS aplinkos kintamųjų pasaulį, ypatingą dėmesį skiriant saugiai sričiai ir peržiūros lauko pritaikymui. Mes išnagrinėsime, kaip šie kintamieji gali būti naudojami kuriant sklandžias ir vizualiai patrauklias patirtis vartotojams visame pasaulyje, atsižvelgiant į įvairių įrenginių ir ekrano charakteristikų paplitimą skirtinguose regionuose.

Kas yra CSS aplinkos kintamieji?

CSS aplinkos kintamieji, pasiekiami naudojant env() funkciją, atveria įrenginio specifinius aplinkos duomenis jūsų stilių aprašams. Šie duomenys gali apimti informaciją apie įrenginio ekrano matmenis, orientaciją, saugias sritis (regionus, kurių nepaveikia įrenginio rėmeliai ar vartotojo sąsajos elementai) ir daugiau. Jie nutiesia tiltą tarp įrenginio operacinės sistemos ir interneto naršyklės, leisdami kūrėjams kurti kontekstą atitinkančius dizainus, kurie dinamiškai prisitaiko prie vartotojo aplinkos.

Galvokite apie juos kaip apie iš anksto apibrėžtus CSS kintamuosius, kuriuos naršyklė automatiškai atnaujina pagal dabartinį įrenginį ir jo kontekstą. Užuot kietai koduojant reikšmes paraštėms, atitraukimams ar elementų dydžiams, galite naudoti aplinkos kintamuosius, kad naršyklė nustatytų optimalias reikšmes pagal įrenginio charakteristikas.

Pagrindiniai CSS aplinkos kintamųjų naudojimo pranašumai:

Saugios srities supratimas

Saugios sritys – tai ekrano regionai, kurie garantuotai bus matomi vartotojui ir kurių nepaveiks įrenginio rėmeliai, išpjovos, suapvalinti kampai ar sistemos vartotojo sąsajos elementai (pvz., būsenos juosta iOS arba naršymo juosta Android). Šios sritys yra itin svarbios norint užtikrinti, kad svarbus turinys visada būtų pasiekiamas ir neuždengtas aparatinės ar programinės įrangos savybių.

Įrenginiuose su nestandartinėmis ekrano formomis ar dideliais rėmeliais, ignoruojant saugias sritis, turinys gali būti nukirptas ar uždengtas vartotojo sąsajos elementų, o tai lemia prastą vartotojo patirtį. CSS aplinkos kintamieji suteikia prieigą prie saugios srities įtraukų, leisdami jums pritaikyti savo išdėstymą šiems regionams.

Saugios srities aplinkos kintamieji:

Šie kintamieji grąžina reikšmes, atspindinčias atstumą (pikseliais ar kitais CSS vienetais) tarp peržiūros lauko krašto ir saugios srities pradžios. Galite naudoti šias reikšmes, norėdami pridėti atitraukimą ar paraštę elementams, užtikrindami, kad jie liktų matomose ekrano ribose.

Praktiniai saugios srities naudojimo pavyzdžiai:

1 pavyzdys: Atitraukimo pridėjimas prie „body“ elemento

Šis pavyzdys parodo, kaip pridėti atitraukimą prie body elemento, siekiant užtikrinti, kad turinys nebūtų uždengtas įrenginio rėmelių ar vartotojo sąsajos elementų.

body {
  padding-top: env(safe-area-inset-top, 0);  /* Numatytasis 0, jei kintamasis nepalaikomas */
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

Šiame pavyzdyje env() funkcija naudojama prieigai prie saugios srities įtraukų. Jei įrenginys nepalaiko saugios srities aplinkos kintamųjų, bus naudojama antroji env() funkcijos argumento reikšmė (šiuo atveju 0) kaip atsarginė vertė, užtikrinant, kad išdėstymas išliktų funkcionalus net ir senesniuose įrenginiuose.

2 pavyzdys: Fiksuotos antraštės pozicionavimas saugioje srityje

Šis pavyzdys parodo, kaip pozicionuoti fiksuotą antraštę saugioje srityje, kad jos neuždengtų būsenos juosta iOS įrenginiuose.

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(44px + env(safe-area-inset-top, 0));  /* Pritaikyti aukštį būsenos juostai */
  padding-top: env(safe-area-inset-top, 0);  /* Atsižvelgti į būsenos juostos atitraukimą */
  background-color: #fff;
  z-index: 1000;
}

Čia antraštės height ir padding-top dinamiškai pritaikomi pagal safe-area-inset-top reikšmę. Tai užtikrina, kad antraštė visada būtų matoma ir nepersidengtų su būsenos juosta. Funkcija `calc()` naudojama pridėti saugios srities įtrauką prie bazinio aukščio, leidžiant nuoseklų stilių visuose įrenginiuose, tuo pačiu prisitaikant prie būsenos juostos aukščio, kai tai būtina.

3 pavyzdys: Apatinių naršymo juostų tvarkymas

Panašiai, apatinės naršymo juostos gali uždengti turinį. Naudokite `safe-area-inset-bottom`, kad turinys nebūtų paslėptas. Tai ypač svarbu mobiliosioms interneto programoms.

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0); /* Pritaikyti apatinei naršymo juostai */
  background-color: #eee;
  z-index: 1000;
}

Globalūs aspektai, susiję su saugiomis sritimis:

Peržiūros lauko pritaikymas naudojant peržiūros lauko vienetus

Peržiūros lauko vienetai yra CSS vienetai, kurie yra susiję su peržiūros lauko – matomos naršyklės lango srities – dydžiu. Jie suteikia lankstų būdą nustatyti elementų dydį ir kurti išdėstymus, kurie prisitaiko prie skirtingų ekrano dydžių. Skirtingai nuo fiksuotų vienetų (pvz., pikselių), peržiūros lauko vienetai keičiasi proporcingai peržiūros laukui, užtikrindami, kad elementai išlaikytų savo santykinį dydį ir padėtį visuose įrenginiuose.

Pagrindiniai peržiūros lauko vienetai:

Peržiūros lauko vienetų naudojimas jautriems išdėstymams:

Peržiūros lauko vienetai ypač naudingi kuriant viso pločio ar viso aukščio elementus, proporcingai keičiant teksto dydį pagal ekrano dydį ir išlaikant kraštinių santykį. Naudodami peržiūros lauko vienetus, galite kurti išdėstymus, kurie sklandžiai prisitaiko prie skirtingų ekrano dydžių, nepasikliaudami medijos užklausomis kiekvienam smulkiam koregavimui.

1 pavyzdys: Viso pločio antraštės kūrimas

header {
  width: 100vw; /* Visas peržiūros lauko plotis */
  height: 10vh; /* 10% peržiūros lauko aukščio */
  background-color: #333;
  color: #fff;
  text-align: center;
}

Šiame pavyzdyje antraštės width nustatytas į 100vw, užtikrinant, kad ji visada apimtų visą peržiūros lauko plotį, nepriklausomai nuo ekrano dydžio. height nustatytas į 10vh, todėl jis yra 10% peržiūros lauko aukščio.

2 pavyzdys: Jautrus teksto dydžio nustatymas

h1 {
  font-size: 5vw;  /* Šrifto dydis, priklausantis nuo peržiūros lauko pločio */
}

p {
  font-size: 2.5vw;
}

Čia h1 ir p elementų font-size yra apibrėžti naudojant vw vienetus. Tai užtikrina, kad tekstas keičiasi proporcingai peržiūros lauko pločiui, išlaikant skaitomumą skirtinguose ekrano dydžiuose. Mažesni peržiūros lauko pločiai lems mažesnį tekstą, o didesni – didesnį.

3 pavyzdys: Kraštinių santykio išlaikymas naudojant „padding hack“

Norint išlaikyti pastovų kraštinių santykį elementams, ypač paveikslėliams ar vaizdo įrašams, galite naudoti „padding hack“ kartu su peržiūros lauko vienetais. Ši technika apima elemento padding-bottom savybės nustatymą kaip jo pločio procentinę dalį, efektyviai rezervuojant vietą elementui pagal norimą kraštinių santykį.

.aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 kraštinių santykis (9 / 16 * 100) */
  height: 0;
}

.aspect-ratio-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Šiame pavyzdyje .aspect-ratio-container elemento padding-bottom yra nustatytas į 56.25%, kas atitinka 16:9 kraštinių santykį. Tada iframe (ar bet kuris kitas turinio elementas) yra absoliučiai pozicionuojamas konteinerio viduje, užpildant visą prieinamą erdvę ir išlaikant norimą kraštinių santykį. Tai neįtikėtinai naudinga įterpiant vaizdo įrašus iš platformų, tokių kaip „YouTube“ ar „Vimeo“, užtikrinant, kad jie būtų teisingai rodomi visuose ekrano dydžiuose.

Peržiūros lauko vienetų apribojimai:

Nors peržiūros lauko vienetai yra galingi, jie turi keletą apribojimų:

Dinaminiai peržiūros lauko vienetai: svh, lvh, dvh

Šiuolaikinės naršyklės pristato tris papildomus peržiūros lauko vienetus, kurie sprendžia problemą, kai naršyklės vartotojo sąsajos elementai veikia peržiūros lauko dydį, ypač mobiliuosiuose įrenginiuose:

Šie vienetai yra neįtikėtinai naudingi kuriant viso ekrano išdėstymus ir patirtis mobiliuosiuose įrenginiuose, nes jie suteikia nuoseklesnius ir patikimesnius peržiūros lauko aukščio matavimus. Kai naršyklės vartotojo sąsaja atsiranda ar dingsta, `dvh` keičiasi, prireikus sukeldamas išdėstymo korekcijas.

Pavyzdys: dvh naudojimas viso ekrano mobiliųjų įrenginių išdėstymams:

.full-screen-section {
  height: 100dvh;
  width: 100vw;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

Šis pavyzdys sukuria viso ekrano sekciją, kuri visada užima visą matomą ekrano plotą, prisitaikydama prie naršyklės vartotojo sąsajos buvimo ar nebuvimo mobiliuosiuose įrenginiuose. Tai apsaugo turinį nuo uždengimo adreso juosta ar kitais elementais.

Saugios srities ir peržiūros lauko vienetų derinimas optimaliam jautrumui

Tikroji galia slypi derinant saugios srities įtraukas su peržiūros lauko vienetais. Šis metodas leidžia kurti išdėstymus, kurie yra ir jautrūs, ir atsižvelgiantys į specifines įrenginio savybes, užtikrinant optimalią vartotojo patirtį įvairiuose įrenginiuose.

Pavyzdys: Mobiliems įrenginiams pritaikytos naršymo juostos kūrimas su saugios srities palaikymu

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(10vh + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh; /* Likęs aukštis atsižvelgus į saugią sritį */
  padding: 0 16px;
}

Šiame pavyzdyje nav elementas naudoja ir vw, ir env(), kad sukurtų jautrią naršymo juostą, atsižvelgiančią į saugią sritį. Plotis nustatytas į 100vw, kad užtikrintų, jog jis apims visą peržiūros lauko plotį. Aukštis ir padding-top dinamiškai koreguojami pagal safe-area-inset-top reikšmę, užtikrinant, kad naršymo juosta nebūtų uždengta būsenos juostos. Klasė .nav-content užtikrina, kad turinys naršymo juostoje išliktų centruotas ir matomas.

Gerosios CSS aplinkos kintamųjų naudojimo praktikos

Naršyklių suderinamumas ir atsarginės priemonės

Nors CSS aplinkos kintamieji ir peržiūros lauko vienetai yra plačiai palaikomi šiuolaikinių naršyklių, svarbu atsižvelgti į naršyklių suderinamumą, ypač kai taikoma globaliai auditorijai. Senesnės naršyklės gali visiškai nepalaikyti šių funkcijų, todėl jums reikės pateikti tinkamas atsargines priemones, kad užtikrintumėte nuoseklią vartotojo patirtį.

Naršyklių suderinamumo valdymo strategijos:

Pavyzdys: CSS funkcijų užklausų naudojimas aplinkos kintamųjų palaikymui:

@supports (safe-area-inset-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
  }
}

@supports not (safe-area-inset-top: env(safe-area-inset-top)) {
  /* Atsarginiai stiliai naršyklėms, kurios nepalaiko saugios srities įtraukų */
  body {
    padding: 16px; /* Naudoti numatytąją atitraukimo reikšmę */
  }
}

Šis pavyzdys naudoja @supports taisyklę, kad patikrintų, ar naršyklė palaiko safe-area-inset-top aplinkos kintamąjį. Jei palaiko, atitraukimas taikomas naudojant aplinkos kintamuosius. Jei ne, vietoj to taikoma numatytoji atitraukimo reikšmė.

Išvada: adaptyvaus tinklalapių dizaino pritaikymas globaliai auditorijai

CSS aplinkos kintamieji ir peržiūros lauko vienetai yra esminiai įrankiai kuriant tikrai jautrius ir pritaikomus tinklalapių dizainus, skirtus globaliai auditorijai. Suprasdami, kaip pasinaudoti šiomis funkcijomis, galite sukurti sklandžias ir vizualiai patrauklias patirtis vartotojams įvairiuose įrenginiuose, ekrano dydžiuose ir operacinėse sistemose.

Pritaikydami šias technikas, galite užtikrinti, kad jūsų svetainės ir interneto programos būtų prieinamos ir malonios vartotojams visame pasaulyje, nepriklausomai nuo įrenginio, kuriuo jie naudojasi jūsų turiniui pasiekti. Svarbiausia yra kruopščiai testuoti, teikti atsargines priemones senesnėms naršyklėms ir sekti naujausius interneto svetainių kūrimo standartų pokyčius. Tinklalapių dizaino ateitis yra adaptyvi, o CSS aplinkos kintamieji yra šios evoliucijos priešakyje.

Papildomi ištekliai