U CSS-pravilima koriste se dvije varijante mjernih jedinica: apsolutne i relativne. U početku je bila poznata samo jedna apsolutna mjerna jedinica - piksel. Njegova veličina ovisila je o matrici ili monitoru, i bilo je lako izračunati sama od sebe.
Nedostaci uporabe piksela
Za izdavače koji rade na medijima, na stranici je važno istaknuti sam sadržaj. Trebao bi biti čitljiv, s optimalnom duljinom crte i dovoljnom veličinom, tako da čak i korisnik s niskom vidljivošću može lako uočiti tekst. Nije važno koji uređaj korisnik čita članak i koliko je dobar - važno je da razumije sadržaj članka bez posebnih gadgeta. Kada se koriste pikseli u rasporedu, zumiranje često rezultira smanjenjem broja riječi u retku, postoje neugodni prijelazi teksta ili se sadržaj uopće ispušta iz spremnika. Stoga su web programeri i dizajneri počeli koristiti prilikom pisanja postotaka koda i relativnih mjernih jedinica, kao što su EM, REM. Ali oni još uvijek nisu mogli potpuno istisnuti piksele.
Povijest pojavljivanja relativnih jedinica
Budući da prve stranice u većini preglednika nisu bile skalirane, pikseli su dugo vremena ostali jedina opcija za opisivanje veličine fontova. No, s razvojem web tehnologija pojavila se potreba za stvaranjem novih mjernih jedinica. Tako su postojali EM i%, a zatim REM, čije su vrijednosti bile vezane uz standarde preglednika i obično se izjednačavale16 piksela Postoji empirijsko pravilo koje kombinira osnovne veličine fonta: 100% = 1 em ~ 16px ~ 14pt. To znači da ako ne promijenite veličinu fonta u bilo kojem podređenom elementu, u pregledniku će zadano biti oko 16 piksela i oko 14pt (tipografska točka), ali uvijek 100% i 1 em.
Korištenje relativnih mjernih jedinica olakšalo je raspored, što je modularne elemente učinilo prihvatljivijim. Moderna tehnologija zahtijeva da se pri skaliranju elemenata na stranicama razlikuju po veličini, ovisno o zaslonu dopuštenja ili prozoru preglednika korisnika. Stoga su EM i REM u CSS-u postali nezamjenjiv pomoćnik za stvaranje web-mjesta koja zahtijevaju prilagodljive veličine fontova. Trenutno, većina preglednika nema problema s skaliranjem teksta, a njihovo ponašanje s povećanjem ili smanjivanjem veličine fonta je u skladu. No, svaki izgled treba provjeriti u nekoliko preglednika, uključujući i one koji su zastarjeli, kako bi se razumjelo kako će izgledati krajnji rezultat za različite korisnike.
Korištenje relativnih jedinica
Relativne mjerne jedinice, tako uobičajene u tipografiji i CSS-u, EM-u i REM-u, prosječnim su korisnicima manje poznate od piksela. Nije svaki početnik dizajner ili planer razumije svoju svrhu i koristi ga ispravno. Između profesionalnih dizajnera još uvijek postoje sporovi kada je bolje koristiti jednu ili drugu jedinicu. Ipak, relativne jedinice znatno olakšavaju osjetljivi raspored i smatraju se najučinkovitijom metodom u konstruiranju modularnih komponenti. EM i REMkoriste se za određivanje veličine različitih elemenata - zaglavlja, rubova, okvira. Ali njihove se veličine izračunavaju drugačije.
Što je EM
EM je relativna mjerna jedinica koja ovisi o veličini fonta roditeljskog elementa. Često je to propisano u CSS pravilu za oznaku tijela. Ova oznaka definira parametre svih elemenata na stranici. Kako razumjeti EM jedinice u CSS-u i izračunati njihove vrijednosti? Sve je vrlo jednostavno. Ako je veličina fonta (tj. Veličina fonta) izbornika tijela 10 piksela, 1 EM je također 10 piksela, tj. Postavljač specificira vrijednost same jedinice. Kao rezultat toga, sve druge dimenzije dane u EM izračunat će se na temelju te vrijednosti. Tekstovi čiji su parametri postavljeni u pikselima i relativnim jedinicama ne moraju se vizualno mijenjati dok se ne moraju mijenjati. Ali oni su vrlo prikladni za stvaranje fleksibilnih modularnih blokova. Ako ne postavite veličinu fonta, ali koristite relativne jedinice u kodu, one će se izračunati prema zadanim postavkama, a 1 EM bit će 16 piksela.
Značajke mjerne jedinice EM
Postoji još jedna značajka kada se koriste relativne mjerne jedinice EM. Ako je veličina fonta postavljena na 2 EM u selektoru, tada kada se koristi EM u parametrima za drugo svojstvo u istom selektoru, vrijednost ove jedinice će se koristiti drugačije. Zbog toga se veličina elementa udvostručuje. Parametri EM izračunavaju se na temelju veličine fonta u određenom bloku. To jest, ako je veličina fonta selektora stavka (oznaka "p") jednaka 2 EM, a zatijelo, to je 10 piksela, tada pri dodavanju selektoru p veličina vanjskog ruba teksta ("margina") u debljini od 1 EM bit će jednaka 10 i 20 piksela.
Da biste dobili veličinu fonta jednaku 10 piksela, morate koristiti 05 EM. Takve promjene vrijednosti u različitim dijelovima kodeksa često zamjenjuju početnički obrtnici. Također je postojao problem korištenja EM u CSS-u - pri postavljanju veličine fonta od 0875 EM, svaki sljedeći priključeni element bio je smanjen. Neželjeni učinci uzrokovali su uporabu ove jedinice i margine-dno. U ovom slučaju veličina fontova utjecala je na polja oko elementa, kao u EM izravno vezana uz ovaj parametar blokovskog modela.
REM mjerenja u CSS-u
Sada pogledajmo koja je REM mjerna jedinica i kako je koristiti. Prvi spomen REM-a pojavio se 2011. godine u komentaru na članak njemačkog programera Gerrit van Aakena o korištenju piksela u CSS kodu. Ova relativna jedinica je blizu EM u svojoj vrijednosti, a njeno ime je prevedeno kao "root EM" ili Root Em. REM ponašanje je predvidljivije. Korištenje ove jedinice u izgledu olakšava izračunavanje veličine elemenata u različitim dijelovima koda, budući da je REM u CSS jednak vrijednosti veličine fonta postavljenog za korijenski element, HTML oznaku. Ali češće se ta vrijednost dodaje u tijelo da bi se isključile pogreške u izračunu. Korištenje REM-a u CSS-u, ako njegova vrijednost nije upisana u HTML oznaku, još je lakše. 1 REM će biti jednak standardnim 16 piksela, kao u slučaju EM, čija vrijednost nije postavljena.
Sporovi okokoristiti REM u CSS-u. REM vs. EM
REM i EM imaju svoje pluseve i minuse. Postoji mnogo kontroverzi među rukovateljima, koja relativna jedinica mjerenja primijeniti prilikom pisanja koda. Smatra se da uporaba REM-a u CSS-u čini raspored manje modularnim, a EM komplicira raspored i zahtijeva pažljiv pristup i izračune. Svaki instalater u procesu rada sam bira za sebe, koja mjerna jedinica i gdje se primjenjuje. Ali u početnoj fazi, pikseli su još bolji. EM je bolji za stavke čija su svojstva skalirana na temelju veličine fonta. U drugim slučajevima, REM je bolje prilagođen.
Korištenje REM-a u zaglavljima
Razmotrimo kako će se zaglavlja teksta (oznake h1-h6) promijeniti ako su napisana u REM-u. Pretpostavimo da zaglavlje sadrži polja oko nje - padding, pozadinu i specificiranu veličinu fonta. Ako želite povećati naslov, razmak između rubova elementa će se smanjiti, tako da će padding morati biti prevladan. Ali onda postoji problem s činjenicom da svi elementi jednostavno prestaju biti sadržani na stranici. No, tu je postavljena veličina fonta u pikselima, a zatim u postavkama preglednika pokušati ga promijeniti na veći, ništa se neće dogoditi. Kada koristite REM, povećat će se i smanjiti ovisno o postavkama korisnika.
Ograničenja korijena Em
REM pomaže u stvaranju kaskadnih tablica s različitim veličinama fonta za naslove i stavke. To uvelike pojednostavljuje izgled, jer nije potrebno potpuno mijenjati kod - dovoljno je ispraviti veličinu fonta u html tagu. Postoji i ograničenje za korištenje ove jedinice. U starijim verzijama preglednika Opera i IE te Inneki Android preglednici još uvijek nisu podržani. Stoga su programeri prisiljeni koristiti piksele kao rezervnu opciju i pisati dualni kod. Moderni preglednici čitat će linije s veličinom fonta u pikselima i prevesti ih u REM, a zastarjeli jednostavno neće vidjeti kod s nepoznatom jedinicom mjere. Ali ako zaboravite na to i počnete razvijati stranicu za određeni ekran, tada možete izgubiti puno korisnika koji jednostavno ne mogu prihvatiti sadržaj, razbijen korištenjem REM-a ili EM.
Novi načini određivanja veličine teksta
Popis veličina CSS-a sada ne uključuje samo gore navedene opcije. Postojale su nove stavke:
VW - jednaka širini preglednika 1/100. VMIN - 1/100 manja strana prozora preglednika. VMAX - 1/100 na većoj strani prozora preglednika. VH - jednaka duljini preglednika 1/100. EX - Ovisno o visini slova "x" u donjem slučaju. CH - izračunava se ovisno o simbolu "0" u fontu trenutnog elementa. Većina ovih opcija također se koristi za izradu fleksibilnih rasporeda mjesta, gdje se veličina spremnika mjeri ovisno o veličini prozora preglednika. Ali za udobno skaliranje stranica je obično dovoljno EM ili REM.
