Share
rem unitatea este folosită pentru a defini fonturile în termeni relativi, mai degrabă decât cu o dimensiune absolută în pixeli. Dar știați că această unitate este utilă atât pentru layouts, cât și pentru tipografie?
În acest tutorial video din cursul CSS Layout, veți afla de ce există un beneficiu uriaș pentru utilizare rem unități pentru machete.
În cursul CSS Layout, toate specificațiile layoutului nostru se fac folosind rem unitate. Așa cum am menționat în detaliu în cursul de tipografie, a rem unitatea este un multiplu de dimensiunea fontului rădăcină pentru pagina dvs..
rem unitatea este utilă nu doar pentru tipografie, ci și pentru aspectul dvs. și vă voi arăta de ce ar trebui să utilizați rem atunci când vă configurați aspectul.
Să începem cu o privire la pagina de probă pe care lucrăm:
Dacă schimbați dimensiunea fontului în browser, puteți vedea că mărimea fontului crește pe pagină:
Acum, dacă continu să măresc dimensiunea fontului și refresh, acum puteți vedea că întregul aspect a fost adaptat pentru a ține seama de mărimea fontului mai mare.
Totul este încă lizibil, și acest lucru este posibil datorită utilizării rem unitățile pentru a configura întregul aspect, asigurăm că totul este flexibil în funcție de dimensiunea fontului rădăcinii documentului nostru, care vine din setările browserului.
În același sens, dacă diminuez mărimea fontului la o dimensiune foarte mică și se reîmprospătează din nou, puteți vedea că întreaga structură a scăzut din nou.
Deci, folosind aceste rem , ne asigurăm că atunci când un utilizator modifică dimensiunea fontului, nu numai textul însuși se schimbă pentru a se potrivi, dar tot așa face întregul aspect.
În cursul complet, Începeți aici: Aflați CSS Layout, veți pune în practică ceea ce ați învățat în acest videoclip, creând o varietate de planuri utilizând rem unități. Veți învăța tot ce trebuie să știți pentru a crea cele mai comune tipuri de layout-uri în designul web. Vom acoperi dimensiunea, alinierea, spațierea și cele mai bune practici pentru a crea CSS receptiv.
Dacă sunteți doar începători și doriți să comandați CSS, consultați Aflați CSS: Ghid complet.
Sau puteți experimenta mai multe cursuri din seria "Start Here" pentru începători în domeniul designului web:
Accentsconagua