CSS (Cascading Style Sheets) este unul dintre elementele de bază ale interfețelor utilizator în aplicațiile web, mobile și desktop. Acest limbaj de stilare are valori și proprietăți diferite, ceea ce face ca aplicațiile să fie ușoare pentru stiluri și proprietăți diferite. REM este una dintre valorile pe care le veți întâlni mult pe măsură ce vă stilați paginile web folosind CSS.
În acest articol, voi explica REM în CSS, voi discuta despre importanța tipografiei receptive în design web, voi descrie modul în care sunt calculate unitățile REM și voi menționa câteva beneficii ale utilizării REM în CSS.
Cuprins
Ce este REM în CSS?
Root-EM (REM) sunt unități care indică dimensiunea fontului unui element în raport cu dimensiunea fontului elementului rădăcină. REM este o unitate relativă, ceea ce înseamnă că toate valorile care o folosesc se vor schimba atunci când se schimbă dimensiunea fontului elementului rădăcină. Dimensiunea implicită a fontului pentru majoritatea browserelor este de 16 px. Astfel, dacă elementul rădăcină este 16px, dimensiunea REM va fi 1.
Unitățile REM sunt opusul unităților absolute precum pixelii. Luați, de exemplu, acest cod:
<div>Hello World</div>
Acesta este stilul nostru:
div {
border: 1.5px solid black;
width: 200px;
}
Lățimea blocului (200px) va rămâne aceeași, indiferent dacă dimensiunea ecranului crește sau devine mai mică. Această lățime nu este relativă la nimic din documentul nostru HTML.
Același lucru este valabil și pentru marginea containerului nostru; va rămâne de 1,5 pixeli, indiferent de ecran sau de variația mediului.
Importanța tipografiei responsive în design web
Tipografia receptivă implică o mulțime de lucruri, cum ar fi aspectul textului, dimensiunea și spațierea. Acestea sunt câteva dintre motivele pentru care designerii web implementează design web responsive:
- Experiență îmbunătățită a utilizatorului: utilizatorii web sunt atrași de aplicații ușor de navigat. O aplicație care se adaptează la diferite dimensiuni și medii ale ecranului oferă o experiență de utilizator plăcută și fără întreruperi.
- Ușurează adaptarea la diferite ferestre de vizualizare: tipografia receptivă verifică spațiul disponibil într-o fereastră de vizualizare și se ajustează în consecință. Astfel, nu veți avea cazuri de texte supraîntinse pe ecrane mari sau texte minuscule pe ecrane mici.
- Lizibilitate îmbunătățită: un site web bun ar trebui să fie ușor de accesat și de citit. Investiția în tipografie receptivă vă asigură că textul aplicației dvs. se ajustează în funcție de dimensiunea și orientarea ecranului.
- Branding consecvent: pe măsură ce codul sursă crește, este posibil să aveți variații mixte de font în cadrul aplicației dvs. Designul receptiv vă asigură că aveți abordări de design consecvente, indiferent de dimensiunea ecranului sau de comportamentul utilizatorului.
- Se integrează cu interogările media: tipografia receptivă poate fi combinată cu interogările media. Designerii web pot crea diferite stiluri prin interogări media în care fonturile se ajustează în funcție de caracteristici precum orientarea și dimensiunea ecranului.
- Accesibilitate îmbunătățită: tipografia receptivă este unul dintre fundamentele accesibilității unei aplicații. Ca atare, utilizatorii cu abilități diferite pot ajusta dimensiunile ecranului și fonturile pentru a se potrivi nevoilor lor.
Cum sunt calculate unitățile REM
Unitățile REM sunt calculate în raport cu dimensiunea fontului elementului (rădăcină). Această caracteristică ne permite să creăm modele consecvente și scalabile prin setarea unor valori bazate pe o singură valoare rădăcină.
Majoritatea browserelor sunt setate implicit la 16px. Cu toate acestea, puteți seta dimensiunea fontului valorii rădăcină la o cifră precum 10px. Poți avea așa ceva:
html {
font-size: 10px;
}
Într-un astfel de caz, 10px=1 REM
Putem folosi acest cod pentru a demonstra:
<!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 tipstrick.ro</h1> </body> </html>
Acest cod nu are stil și are un singur element, un H1, care spune „Bine ați venit la tipstrick.ro”.
Dimensiunea fontului în mod implicit va fi 16px, ceea ce înseamnă că 1REM=16px. Când redăm această pagină, iată ce obținem:
Acum putem adăuga o foaie de stil, styles.css, și putem demonstra cum funcționează REM. Iată cum legați fișierele styles.css și index.html în secțiunea
a documentului HTML:<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Apoi puteți avea acest cod:
html {
font-size: 10px;
}
În acest caz, când definim cifrele REM, acestea vor fi relativ la 10px. Dimensiunea fontului H1-ului nostru se va micșora, de asemenea, așa cum se arată în această captură de ecran.
Acum putem schimba dimensiunea H1 folosind valori REM după cum urmează:
h1 {
font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
}
H1-ul nostru acum va fi mai mare la 35px=3.5REM.
Beneficiile utilizării REM în CSS
Majoritatea oamenilor sunt obișnuiți cu pixelii (px) și procentele ca unități de măsură atunci când scriu codul CSS. De ce să nu rămâneți la aceste două opțiuni în loc să optați pentru unități REM? Acestea sunt câteva motive pentru a utiliza REM:
- Crește scalabilitatea: puteți modifica dimensiunea fontului elementului rădăcină, făcând unitățile REM scalabile. O astfel de abordare facilitează schimbarea proporțională a unităților REM. Unitățile REM se vor ajusta, de asemenea, atunci când utilizatorii își ajustează dimensiunile fonturilor browserului.
- Ușor de gestionat: puteți schimba elementul rădăcină în eticheta sau , iar unitățile REM se vor ajusta automat. Această abordare vă scutește de durerea de a ajusta fiecare element din fișierul dvs. CSS. Astfel, puteți modifica dimensiunea fontului, să spunem, tuturor H1-urilor cu o singură modificare.
- Dimensiuni consistente: unitățile REM controlează dimensiunile fonturilor și spațierea. Sunteți astfel asigurat că veți avea dimensiuni de font consecvente în paginile dvs. web, deoarece acestea sunt relativ la elementul rădăcină.
- Face posibilă existența unor designuri receptive: puteți crea modele care se adaptează la diferite dimensiuni de ecran și dispozitive. Când unitățile REM sunt utilizate împreună cu interogări media, puteți ajusta dimensiunile fontului elementului rădăcină, iar alte unități se vor ajusta proporțional.
CSS REM vs. EM vs. procente
Este posibil să fi întâlnit pixeli, REM, EM și procente când scrieți codul CSS. Deși toate aceste unități sunt utilizate pentru a defini dimensiunile și spațierea fonturilor, ele sunt aplicabile în diferite scenarii și vin cu caracteristici diferite. Să comparăm REM cu diferite unități:
REM vs EM
REM și EM sunt unități relative, adică se schimbă în funcție de o valoare dată. Cu toate acestea, REM este legat de elementul rădăcină (), în timp ce EM este legat de elementul părinte (container). De exemplu, aveți un div care acționează ca părinte și un alt div în interiorul părintelui care acționează ca un copil. Aruncă o privire la acest cod:
<div class="parent"> <p>This is the parent element.</p> <div class="child"> <p>This is the child element.</p> </div> </div>
Puteți seta unitățile EM după cum urmează:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
Am atribuit clasei .parent o dimensiune de font de 1,5 em. Cu toate acestea, elementul .child are o dimensiune a fontului de 1,2 em, care este relativ la clasa părinte. Toate modificările din clasa părinte vor fi transferate automat în elementul copil.
REM vs. procente
Unitățile procentuale sunt raportate la dimensiunea/spațierea elementului părinte. Deci, dacă avem un element părinte, cum ar fi
având 16px ca dimensiune a fontului, putem seta un element copil, cum ar fi un, să aibă o dimensiune a fontului de 50%, ceea ce înseamnă că este 50 /100*16=8px.
Puteți ilustra acest lucru folosind acest cod:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Putem rezuma relația dintre REM, EM și procente folosind acest tabel:
CaracteristicăREMEMPcentageRelativ la elementul rădăcinăElementul părinte /containerElementul părinte/containerMoștenire De la rădăcinăDe la părinteDe la părinte Caz de utilizarePotrivit pentru layout-uri consistentePotrivit pentru dimensiuni relativePotrivit pentru designuri receptiveScalabilitateDaDa Relativ
Când să nu folosiți unități REM
Ați putea fi tentat să utilizați unități REM în toate măsurătorile dvs. CSS datorită numeroaselor avantaje ale acestora. Cu toate acestea, acestea sunt câteva dintre cazurile în care ar putea fi nepotrivite:
- Când aveți de-a face cu imprimeuri: Dacă doriți să imprimați ceva, atunci doriți să vă asigurați că aveți de-a face cu valori absolute. În astfel de cazuri, inci sau milimetri vă oferă un control precis asupra dimensiunilor.
- Când doriți un control fin: dacă doriți să controlați dimensiunea unui element, care este strâns legată de părinte, REM nu va fi o opțiune bună. În astfel de cazuri, unitățile absolute sau fixe, cum ar fi pixelii, vor fi o alegere perfectă.
- Când aveți de-a face cu animații și tranziții: unitățile REM nu sunt potrivite acolo unde doriți ca dimensiunea animațiilor și tranzițiilor să se schimbe treptat. Când utilizați unități REM, o anumită modificare a dimensiunii fontului elementului rădăcină va provoca schimbări bruște în tranziții sau animații.
- Când aveți de-a face cu browsere vechi: unele browsere mai vechi nu acceptă unitățile REM. În astfel de cazuri, puteți utiliza procente sau unități bazate pe pixeli.
Concluzie
Sperăm că acum înțelegeți cum să utilizați REM în CSS, să le calculați și unde să le utilizați. Valorile REM sunt valori relative, ceea ce înseamnă că puteți avea dimensiuni de font consistente în aplicațiile dvs.
Pe de altă parte, pixelii sunt valori absolute care nu se modifică în funcție de dimensiunea ferestrei de vizualizare sau a elementelor din jur.
Cu toate acestea, astfel de valori REM nu sunt aplicabile în toate cazurile, deoarece există unele cazuri în care procentele și pixelii se potrivesc mai bine.
Aflați mai multe despre stilizarea utilizând aceste resurse CSS.
A fost de ajutor articolul?
Multumim pentru feedback-ul dvs!