Jedinice dužine u CSS-u. Dimenzioniranje sa vw i vh jedinicama

11.08.2019 Recenzije

CSS3 ima nove mjerne jedinice. (Mislim da sam već pričao o ovome. eng) Već ste čuli za px, pt, em i novi rem. Pogledajmo još nekoliko: vw i vh.

Često u izgledu postoje elementi za koje se garantuje da će se uklopiti u okvir za pregled pretraživača. Generalno, JavaScript se koristi za ovo. Provjerite veličinu okvira za prikaz i u skladu s tim promijenite veličinu elemenata. Ako korisnik promijeni veličinu prozora pretraživača, postupak se ponavlja.

Pomoću vw/vh možemo postaviti veličinu elemenata u odnosu na veličinu okvira za prikaz. Jedinice vw/vh su zanimljive jer je 1vw jedinica jednaka 1/100" širine okvira za prikaz. Da biste elementu dali širinu jednaku širini okvira za prikaz, na primjer, postavili biste width:100vw.

Kako se može koristiti

Lajtboxi su sjajni kandidati za vw i vh jer su obično pozicionirani u odnosu na okvir za prikaz, međutim smatram da je položaj: fiksiran na vrhu, dnu, lijevo i desno da je lakši za korištenje jer ne morate postavljati visinu i širinu uopšte.

Možete koristiti nove jedinice za veličinu elemenata koji su u normalnom toku. Na primjer, mogu postaviti snimke ekrana na stranicu. Visina ovih snimaka ekrana ne bi trebalo da prelazi visinu prozora za prikaz. Da bih to učinio, mogu postaviti maksimalnu visinu slika:

Img (maksimalna visina:95vh; )

U ovom slučaju, postavljam visinu na 95vh da ostavim malo prostora kada su na ekranu.

Podrška za pretraživač

Ako rem podržavaju gotovo svi glavni pretraživači, uključujući IE9, onda je korištenje vw i vh vrijedno odgode. Trenutno ih podržava samo Internet Explorer 9.

CSS jedinice igraju važnu ulogu u kreiranju web stranica i dimenzioniranju različitih elemenata. CSS vrijednosti se mogu izraziti kao pozitivni ili negativni brojevi, iako neka svojstva prihvaćaju samo pozitivne brojeve. Iza numeričke vrijednosti slijedi skraćenica od dva slova koja označava stvarnu jedinicu dužine. Na primjer, cm (centimetri), px (pikseli) ili em CSS. Izuzetak od ovog pravila je vrijednost 0 (nula), za koju nije potrebna jedinica.

Postoje dvije vrste CSS jedinica: apsolutne i relativne.

Jedinice apsolutne dužine u CSS-u

CSS apsolutne jedinice nisu prikladne za web dizajn. Oni su digitalna oznaka rezultata mjerenja u fizičkom svijetu i ne zavise od veličine i rezolucije ekrana. Apsolutne dužine sa istom vrednošću mogu se razlikovati na različitim ekranima. Ovo je uzrokovano razlikom u DPI ekrana (tačke po inču).

Ekrani visoke rezolucije imaju veći DPI od ekrana niže rezolucije, zbog čega slike i tekst na njima izgledaju manje. Apsolutne jedinice se koriste u definisanju stilova u štampi gde su mere u inčima, tačkama i pikama.

Jedinice apsolutne dužine:

cm (centimetri);
mm (milimetri);
in (inči);
pc (vrhovi);
pt (bodovi);
px (pikseli).

Većina apsolutnih jedinica dužine beskorisna je na webu. Jedini izuzetak je px. Pikseli su relativne jedinice u odnosu na rezoluciju ekrana. Za štampače i monitore veoma visoke rezolucije, jedan piksel u CSS-u jednak je nekoliko piksela na ekranu, tako da je broj piksela po inču oko 96. Piksel je najmanja merna jedinica i obično se koristi kao vodič za druge.

Jedinice relativne dužine u CSS-u

Jedinice relativne dužine u CSS-u nemaju fiksne vrijednosti. Njihova značenja ovise o drugim zadatim vrijednostima ili funkcijama. Oni su traženiji u web dizajnu jer olakšavaju određivanje veličine elementa. Uz njihovu pomoć možete podesiti širinu, visinu, veličinu fonta itd. u odnosu na ostale osnovne parametre.

Relativne jedinice u zavisnosti od fonta

Relativne jedinice specifične za font odnose se na unaprijed definiranu veličinu fonta ili vrijednost svojstva porodice fontova:

ex (visina karaktera x);
ch( širina znakova nula (0));
em jedinica u css (visina fonta trenutnog elementa);
rem( veličina fonta korijenskog elementa).

ex

Definirano kao " x visina karaktera trenutnog fonta ILI polovina 1 em". To jest, visina malih slova x instaliranog fonta. Promjena vrijednosti svojstva font-family mijenja jedinicu ex.

ch

Jednako širini karaktera 0 . Ova jedinica se također mijenja kada se promijeni vrijednost svojstva porodice fontova.

em

em CSS jedinica ima vrijednost jednaku veličini fonta glavnog ili nadređenog elementa. Na primjer, ako je veličina fonta roditeljskog elementa 30px, tada će vrijednost 1em biti izračunata kao 30px (30x1) za sve podređene elemente. Broj ne mora biti cijeli broj. Ako u primjeru zamijenimo 1em sa 0,5, tada će vrijednost biti 15px (30 x 0,5).

Jedinica em preuzima vrijednost roditeljske oznake. Ovo može dovesti do neželjenih rezultata kada se koriste ugniježđeni elementi.

Recimo da imamo tri ugniježđena elementa. Prvi element (osnovni element) ima veličinu fonta 30px, a dva ugniježđena elementa imaju veličinu fonta 2em. Element ugniježđen u korijenskom elementu imat će veličinu fonta izračunatu kao 60px (30 x 2). I element ugniježđen unutar njega će imati veličinu fonta izračunatu kao 120px (60 x 2).

rem

rem je sličan CSS em, ali njegova vrijednost uvijek ostaje jednaka veličini fonta osnovnog elementa. Jedinica rem je korisna pri dizajniranju responzivnih web lokacija jer vam omogućava da skalirate cijelu stranicu promjenom veličine fonta u HTML elementu.

Procentualne jedinice za dužinu zasnovane na dimenzijama okvira za prikaz

Okvir za prikaz je zasnovan na širini i visini okvira za prikaz i uključuje:

vh( visina prozora za prikaz);
vw( širina okvira za prikaz);
vmin ( najmanji od (vw, vh));
vmax( najveći od (vw, vh)).

vw

Ovo je širina okvira za prikaz. 1vw je jednako 1/100 širine prozora za prikaz. Pomalo kao procenti, osim što vrijednost ostaje ista za sve elemente bez obzira na širinu njihovih nadređenih elemenata. Na primjer, ako je širina prozora 1000px, tada će 1vw biti jednako 10px.

vh

Isto kao vw( širina okvira za prikaz), samo ova mjerna jedinica ovisi o visini okvira za prikaz. 1vh je jednako 1/100 visine prikaza. Na primjer, ako je visina prozora pretraživača 900px, tada će 1vh biti 9px.

vmin

Vmin je 1/100 minimalne vrijednosti između visine i širine okvira za prikaz. Drugim riječima, 1/100 stranice sa najkraćom dužinom. Na primjer, ako su dimenzije prozora 1200 x 800 piksela, tada će vmin biti 8px.

vmax

vmax je 1/100 maksimalne vrijednosti između visine i širine okvira za prikaz. Drugim riječima, 1/100 najduže strane. Na primjer, ako su dimenzije bile 1200 x 800 piksela, tada je vmax 12px.

postotak %

Udaljenost, data kao postotak, ovisi o dužini roditeljskog elementa. Na primjer, ako je roditeljski element širok 1000px, a njegov podređeni element je 50% te vrijednosti, tada će širina podređenog elementa biti 500px.

PODRŠKA PRETRAŽIVAČU

em CSS, ex, px, cm, mm, in, pt i pc

podržano u svim pretraživačima, uključujući starije verzije IE.

Jedan od najzbunjujućih aspekata css je aplikacija veličina slova atribut za skaliranje teksta. Koristeći CSS, možete promijeniti veličinu teksta u pretraživaču koristeći četiri različite jedinice. Koja je od ove četiri jedinice najbolja za web? Ovo je pitanje koje je izazvalo razne rasprave i kritike. Teško je pronaći konačan odgovor jer je samo pitanje složeno.

Upoznajte - jedinice

1. "Ems" (em): "em" je skalabilna jedinica koja se koristi u web dokumentima. "em" je jednako trenutnoj veličini fonta, na primjer, ako je veličina fonta dokumenta 12pt, 1em je 12pt. "em" je inherentno skalabilan, tako da bi 2em bilo jednako 24pt, 0,5em bi bilo jednako 6pt, i tako dalje. Upotreba "em" postaje sve popularnija u web dokumentima zbog svoje skalabilnosti i mogućnosti da se korisno primjenjuje na mobilne uređaje.
2. Pikseli (px): "px" su jedinice fiksne veličine koje se koriste na ekranima (na primjer, za čitanje na ekranu računara). Jedan piksel je jednak jednoj tački na ekranu računara (najmanji element rezolucije vašeg ekrana). Mnogi web dizajneri koriste px u web dokumentima kako bi postigli savršenu reprezentaciju svoje stranice kada se prikaže u pretraživaču. Jedan od problema s korištenjem px-a je taj što ove jedinice ne dozvoljavaju zumiranje za slabovidne čitaoce ili mobilne uređaje.
3. Bodovi (pt): "pt", tradicionalno se koristi u štampanim medijima (sve što treba odštampati na papiru, itd.). Jedan "pt" je jednak 1/72 inča. "pt", kao i "px", imaju fiksnu jediničnu veličinu i ne mogu se skalirati.
4. Procenti (%): Jedinice mjere u % su slične "em", osim nekoliko fundamentalnih razlika. Prvo, trenutna veličina fonta je 100% (tj. 12pt = 100%). Korištenjem "%", vaš tekst postaje potpuno skalabilan za mobilne uređaje i prilagođen korisniku (pristupačnost).

U čemu je razlika?

Biće lako razumjeti razliku između jedinica veličine fonta kada ih vidite u akciji. Kao opšte pravilo, 1em = 12pt = 16px = 100%. Sa ovim veličinama fonta, hajde da vidimo šta se dešava kada povećate osnovnu veličinu fonta (pomoću CSS selektora tela) sa 100% na 120%.

Promijenite veličinu fonta sa 100% na 120%.

Kao što vidite, "em" i "%" su povećali veličinu fonta, dok "px" i "pt" nisu. Postavljanje apsolutne veličine za vaš tekst može biti lako, ali je mnogo bolje za vaše posjetitelje da koriste skalabilni tekst koji se može prikazati na bilo kojem uređaju ili mašini. Iz tog razloga, jedinice "em" i "%" se preferiraju da se koriste za tekst web dokumenta.

"em" vs "%"

Utvrdili smo da jedinice "px" i "pt" nisu najbolje za web dokumente, što nas tjera da koristimo "em" i "%". U teoriji, jedinice "em" i "%" su identične, ali u praksi imaju manje razlike koje je važno uzeti u obzir.

U gornjem primjeru, koristili smo procente kao osnovnu jedinicu za veličinu fonta (u oznaci body). Ako promijenite osnovnu jedinicu veličine fonta iz "%" u "em" (tj. tijelo (veličina fonta: 1em;)), vi, trebalo bi ne primetiti razliku. Hajde da vidimo šta se dešava kada je "1em" naša osnovna jedinica i kada klijent promeni "Veličinu fonta" u postavkama svog pretraživača (mnogi pretraživači kao što je Internet Explorer imaju ovu opciju).

Veličina fonta kada klijent mijenja veličinu teksta u pretraživaču.

Kada je veličina teksta postavljena na "srednja" u pretraživaču klijenta, nema primjetne razlike između "em" i "%". Međutim, ako se parametar promijeni, razlika postaje vrlo velika. Kada je postavljeno na "Smallest", "em" je mnogo manje od "%", a kada je postavljeno na "Largest", obrnuto, "em" se prikazuje mnogo veće od "%". Dok mnogi tvrde da su jedinice u "em" skali kako je predviđeno, u praksi je tekst u "em" preoštar skaliran, pri čemu najmanji tekst postaje nečitak na nekim mašinama.

Presuda

U teoriji, "em" jedinice su novi i nadolazeći standard za veličinu fonta na webu, ali u praksi, "%" jedinice omogućavaju da se tekst prikazuje dosljednije i udobnije korisnicima. Prilikom promjene parametara klijenta, tekst u "%" se mijenjao u razumnim proporcijama, što omogućava dizajnerima da zadrže čitljivost, pristupačnost i dizajn.

Pobjednik: postotak (%).

CSS3 je dodao nove relativne jedinice kao što su vh, vw, vmin, vmax. Ove jedinice se izračunavaju u odnosu na veličinu prozora pretraživača. Za desktop računare, širina prozora pretraživača je veća od širine okvira za prikaz (dodavanje širine trake za pomeranje), tako da ako postavite širinu elementa na 100vw, on će izaći izvan html-a.

Rice. 1. Pozadinska slika preko cijelog ekrana sa širinom od 100vw