CSS (Cascading Style Sheets) predstavlja temelj za kreiranje korisničkih interfejsa na webu, mobilnim i desktop aplikacijama. Ovaj stilski jezik nudi različite vrednosti i svojstva, omogućavajući da se aplikacijama dodaju raznovrsni stilovi i karakteristike. REM je jedna od vrednosti sa kojom se često susrećemo prilikom stilizovanja web stranica pomoću CSS-a.
U ovom tekstu, objasniću koncept REM u CSS-u, istaknuti važnost responsivne tipografije u web dizajnu, objasniti kako se izračunavaju REM jedinice i navesti neke prednosti korišćenja REM-a u CSS-u.
Šta je REM u CSS-u?
Root-EM (REM) jedinice predstavljaju veličinu fonta elementa u odnosu na veličinu fonta osnovnog (root) elementa. REM je relativna jedinica, što znači da će se sve vrednosti koje je koriste menjati kada se promeni veličina fonta osnovnog elementa. Podrazumevana veličina fonta u većini pretraživača je 16 piksela. Dakle, ako je osnovni element 16 piksela, veličina 1 REM-a biće jednaka 16 piksela.
REM jedinice su suprotne apsolutnim jedinicama kao što su pikseli. Uzmimo, na primer, sledeći kod:
<div>Hello World</div>
Ovo je naš stil:
div {
border: 1.5px solid black;
width: 200px;
}
Širina bloka (200px) će ostati nepromenjena bez obzira da li se veličina ekrana povećava ili smanjuje. Ova širina nije relativna ni prema čemu u našem HTML dokumentu.
Isto važi i za ivicu našeg kontejnera; ostaće 1.5 piksela bez obzira na promenu ekrana ili okruženja.
Važnost responsivne tipografije u web dizajnu
Responsivna tipografija obuhvata mnoge aspekte, poput izgleda teksta, veličine i razmaka. Ovo su neki od razloga zašto web dizajneri koriste responsivni web dizajn:
- Poboljšano korisničko iskustvo: Web korisnike privlače aplikacije koje su jednostavne za navigaciju. Aplikacija koja se prilagođava različitim veličinama ekrana i okruženjima pruža prijatno i besprekorno korisničko iskustvo.
- Lako prilagođavanje različitim viewport-ima: Responsivna tipografija analizira dostupan prostor u viewport-u i prilagođava se u skladu s tim. Dakle, neće biti slučajeva prenatrpanih tekstova na velikim ekranima ili sićušnih tekstova na malim ekranima.
- Poboljšana čitljivost: Dobra web stranica treba da bude laka za pristup i čitanje. Investiranje u prilagodljivu tipografiju osigurava da se tekst u vašoj aplikaciji prilagođava u zavisnosti od veličine ekrana i orijentacije.
- Dosledno brendiranje: Kako se vaš izvorni kod povećava, može doći do varijacija u fontovima unutar aplikacije. Prilagodljiv dizajn osigurava doslednost dizajna bez obzira na veličinu ekrana ili ponašanje korisnika.
- Integracija sa medijskim upitima: Responsivna tipografija se može koristiti zajedno sa medijskim upitima. Web dizajneri mogu kreirati različite stilove putem medijskih upita gde se fontovi prilagođavaju na osnovu karakteristika kao što su orijentacija ekrana i veličina.
- Poboljšana pristupačnost: Responsivna tipografija je temelj pristupačnosti aplikacije. Korisnici sa različitim sposobnostima mogu prilagoditi veličine ekrana i fontova kako bi zadovoljili svoje potrebe.
Kako se izračunavaju REM jedinice
REM jedinice se računaju u odnosu na veličinu fonta <html> (root) elementa. Ovo omogućava kreiranje doslednih i skalabilnih dizajna postavljanjem vrednosti na osnovu jedne osnovne vrednosti.
Većina pretraživača podrazumevano ima postavljenu veličinu fonta na 16 piksela. Međutim, možete podesiti veličinu fonta osnovne vrednosti na, recimo, 10px. Možete imati nešto poput ovog:
html {
font-size: 10px;
}
U tom slučaju, 10px = 1 REM.
Možemo koristiti ovaj kod da demonstriramo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Welcome to techblog.co.rs</h1> </body> </html>
Ovaj kod nema stil i sadrži jedan element, H1, koji ispisuje „Welcome to techblog.co.rs“.
Veličina fonta će podrazumevano biti 16px, što znači da je 1REM = 16px. Kada prikažemo ovu stranicu, dobićemo sledeće:
Sada možemo dodati stilski list, styles.css, i prikazati kako REM funkcioniše. Ovako povezujete styles.css i index.html datoteke u <head> sekciji HTML dokumenta:
<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Zatim, možete dodati sledeći kod:
html {
font-size: 10px;
}
U ovom slučaju, kada definišemo REM figure, one će biti relativne u odnosu na 10px. Veličina fonta našeg H1 će se takođe smanjiti, kao što je prikazano na ovom snimku ekrana.
Sada možemo promeniti veličinu našeg H1 koristeći REM vrednosti na sledeći način:
h1 {
font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
}
Naš H1 će sada biti veći, veličine 35px = 3.5REM.
Prednosti korišćenja REM-a u CSS-u
Većina ljudi je navikla na piksele (px) i procente kao merne jedinice kada pišu CSS kod. Zašto se ne držati ova dva izbora umesto REM jedinica? Ovo su neki od razloga za korišćenje REM-a:
- Povećava skalabilnost: Možete promeniti veličinu fonta osnovnog elementa, čineći REM jedinice skalabilnim. Takav pristup olakšava proporcionalnu promenu REM jedinica. REM jedinice će se takođe prilagoditi kada korisnici promene veličinu fonta u svom pretraživaču.
- Lako za upravljanje: Možete promeniti osnovni element u tagu <html> ili <body>, a REM jedinice će se automatski prilagoditi. Ovaj pristup vas štedi muke pri prilagođavanju svakog elementa u vašoj CSS datoteci. Tako možete promeniti veličinu fonta, na primer, svih H1 elemenata jednim izmenom.
- Dosledno određivanje veličine: REM jedinice kontrolišu veličine fonta i razmake. Tako možete biti sigurni da ćete imati dosledne veličine fonta na vašim web stranicama, jer su one u odnosu na osnovni element.
- Omogućava prilagodljive dizajne: Možete kreirati dizajne koji se prilagođavaju različitim veličinama ekrana i uređajima. Kada se REM jedinice koriste zajedno sa medijskim upitima, možete podesiti veličinu fonta osnovnog elementa, a druge jedinice će se prilagođavati proporcionalno.
CSS REM naspram EM naspram procenata
Možda ste se susreli sa pikselima, REM-ovima, EM-ovima i procentima pri pisanju CSS koda. Iako se sve ove jedinice koriste za definisanje veličina fonta i razmaka, one se koriste u različitim situacijama i imaju različite karakteristike. Hajde da uporedimo REM sa različitim jedinicama:
REM protiv EM
REM i EM su relativne jedinice, što znači da se menjaju na osnovu date vrednosti. Međutim, REM je vezan za osnovni element (<html>), dok je EM vezan za roditeljski (kontejner) element. Na primer, imate div koji se ponaša kao roditelj i drugi div unutar roditelja koji se ponaša kao dete. Pogledajte ovaj kod:
<div class="parent"> <p>This is the parent element.</p> <div class="child"> <p>This is the child element.</p> </div> </div>
Možete podesiti EM jedinice na sledeći način:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
Klasi .parent smo dodelili veličinu fonta od 1.5 em. Međutim, element .child ima veličinu fonta 1.2 em, što je relativno u odnosu na roditeljsku klasu. Sve promene u nadređenoj klasi će se automatski preneti na podređeni element.
REM u odnosu na procente
Procentualne jedinice su relativne u odnosu na veličinu/razmak nadređenog elementa. Dakle, ako imamo roditeljski element, kao što je <body> koji ima 16px kao veličinu fonta, možemo podesiti podređeni element, kao što je <p>, da ima veličinu fonta od 50%, što znači da je 50 / 100 * 16 = 8px.
Ovo se može ilustrovati korišćenjem sledećeg koda:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Možemo sumirati odnos između REM, EM i procenata pomoću ove tabele:
| Osobina | REM | EM | Procenti |
| Relativno u odnosu na | Root element | Nadređeni element/kontejner | Nadređeni element/kontejner |
| Nasleđivanje | Od root-a | Od roditelja | Od roditelja |
| Primer upotrebe | Pogodno za dosledne rasporede | Pogodno za relativne veličine | Pogodno za prilagodljive dizajne |
| Skalabilnost | Da | Da | Relativno |
Kada ne koristiti REM jedinice
Možda ćete biti u iskušenju da koristite REM jedinice u svim CSS merenjima zbog njihovih brojnih prednosti. Međutim, ovo su neki od slučajeva u kojima mogu biti neprikladni:
- Kada radite sa štampom: Ako želite nešto da odštampate, onda želite da budete sigurni da radite sa apsolutnim vrednostima. U takvim slučajevima, inči ili milimetri daju preciznu kontrolu nad dimenzijama.
- Kada želite detaljnu kontrolu: Ako želite da kontrolišete veličinu elementa koja je usko povezana sa roditeljem, REM neće biti dobra opcija. U takvim slučajevima, apsolutne ili fiksne jedinice poput piksela će biti savršen izbor.
- Kada se radi o animacijama i prelazima: REM jedinice nisu pogodne tamo gde želite da se veličina animacija i prelaza postepeno menja. Kada koristite REM jedinice, promena veličine fonta osnovnog elementa će izazvati nagle promene u prelazima ili animacijama.
- Kada se radi o starijim pretraživačima: Neki stariji pretraživači ne podržavaju REM jedinice. U takvim slučajevima možete koristiti procente ili jedinice zasnovane na pikselima.
Zaključak
Sada, nadamo se, razumete kako da koristite REM u CSS-u, kako ih izračunavati i gde ih koristiti. REM vrednosti su relativne vrednosti, što znači da možete imati dosledne veličine fonta u vašim aplikacijama.
Sa druge strane, pikseli su apsolutne vrednosti koje se ne menjaju u zavisnosti od veličine prozora ili okolnih elemenata.
Međutim, REM vrednosti nisu primenljive u svim slučajevima, jer postoje slučajevi gde procenti i pikseli bolje odgovaraju.
Saznajte više o stilizovanju pomoću ovih CSS resursa.
Da li je ovaj članak bio od pomoći?
Hvala na povratnim informacijama!