Merilna enota REM v CSS - splošne informacije in metode uporabe

V pravilih CSS sta uporabljeni dve različici merskih enot: absolutna in relativna. Sprva je bila znana samo ena absolutna merska enota - pixel. Njegova velikost je bila odvisna od matrike ali monitorja in je bilo enostavno izračunati sama.

Slabosti uporabe slikovnih pik

Za založnike, ki delajo na medijih, je na strani pomembno poudariti samo vsebino. Biti mora berljiv, z optimalno dolžino črte in zadostno velikostjo, tako da lahko tudi uporabnik z nizko vidljivostjo zaznava besedilo. Ni pomembno, katero napravo uporabnik bere članek in kako dobro je - pomembno je, da razume vsebino članka brez posebnih pripomočkov. Če uporabljate slikovne pike v postavitvi, se pri povečavi pogosto zmanjša število besed v vrstici, pride do nerodnih prehodov besedila ali pa se vsebina spusti iz vsebnika. Zato so spletni razvijalci in oblikovalci začeli uporabljati pri pisanju kodnih odstotkov in relativnih merskih enot, kot je EM, REM. Vendar še vedno ne morejo povsem potisniti pikslov.


Zgodovina nastanka relativnih enot

Ker prve strani v večini brskalnikov niso bile pomanjšane, so piksli dolgo časa ostali edina možnost za opis velikosti pisav. Toda z razvojem spletnih tehnologij se je pojavila potreba po ustvarjanju novih merskih enot. Tako so bili EM in%, nato pa REM, katerih vrednosti so bile vezane na standarde brskalnika in so bile običajno enake16 slikovnih pik Obstaja empirično pravilo, ki združuje osnovne velikosti pisav: 100% = 1 em ~ 16px ~ 14pt. To pomeni, da če ne spremenite velikosti pisave v katerem koli podrejenem elementu, bo privzeto v brskalniku približno 16 slikovnih pik in približno 14pt (tipografska točka), vendar vedno 100% in 1 em.


Uporaba relativnih merskih enot je olajšala razporeditev, zaradi česar so modularni elementi bolj obvladljivi. Sodobna tehnologija zahteva, da se pri prilagajanju elementov na straneh velikosti razlikujejo glede na zaslon dovoljenja ali okno brskalnika uporabnika. Zato so EM in REM v CSS postali nepogrešljiv pomočnik pri ustvarjanju spletnih mest, ki zahtevajo prilagodljive velikosti pisav. Trenutno večina brskalnikov nima težav s spreminjanjem besedila, njihovo vedenje s povečanjem ali zmanjševanjem velikosti pisave pa je skladno. Vendar pa je treba vsako postavitev preveriti v več brskalnikih, vključno s tistimi, ki so zastareli, da bi razumeli, kako bo videti končni rezultat za različne uporabnike.

Uporaba relativnih enot

Relativne merske enote, ki so tako tipične v tipografiji in CSS, - EM in REM, so povprečne uporabnike manj poznane kot piksli. Ni vsak začetnik oblikovalec ali načrtovalec razume njihov namen in ga uporablja pravilno. Med profesionalnimi oblikovalci še vedno obstajajo spori, ko je bolje uporabiti eno ali drugo enoto. Kljub temu relativne enote bistveno olajšajo občutljivo postavitev in veljajo za najučinkovitejšo metodo pri izdelavi modularnih komponent. EM in REMse uporabljajo za določanje velikosti različnih elementov - glave, meje, okvirje. Toda njihove velikosti se izračunajo drugače.

Kaj je EM

EM je relativna merska enota, ki je odvisna od velikosti pisave matičnega elementa. Pogosto je to predpisano v pravilu CSS za oznako telesa. Ta oznaka določa parametre vseh elementov na strani. Kako razumeti EM enote v CSS in izračunati njihove vrednosti? Vse je zelo preprosto. Če je velikost pisave (to je velikost pisave) izbirnika telesa 10 slikovnih pik, je 1 EM tudi 10 slikovnih pik, kar pomeni, da nastavljalec sam določi vrednost te enote. Posledično bodo na tej vrednosti izračunane vse druge dimenzije, podane v EM. Besedila, katerih parametri so nastavljeni v slikovnih pikah in relativnih enotah, se lahko vizualno razlikujejo, dokler jih ni treba spremeniti. Vendar so zelo priročni pri ustvarjanju fleksibilnih modularnih blokov. Če ne nastavite velikosti pisave, temveč uporabite relativne enote v kodi, se bodo privzeto izračunale, 1 EM pa 16 slikovnih pik.

Značilnosti merske enote EM

Pri uporabi relativnih merskih enot EM obstaja še ena značilnost. Če je velikost pisave v izbirniku nastavljena na 2 EM, se pri uporabi EM v parametrih za drugo lastnost v istem izbirniku vrednost te enote uporabi drugače. Zato se velikost elementa podvoji. Parametre EM izračunamo na podlagi velikosti pisave v določenem bloku. To je, če je velikost pisave izbirnika odstavka (oznaka "p") enaka 2 EM, in zatelo, je 10 slikovnih pik, potem, ko dodamo izbirniku p velikost zunanjega roba besedila ("rob") v debelini 1 EM, bo enak 10 in 20 slikovnih pik.
Da bi dobili velikost pisave 10 pik, morate uporabiti 05 EM. Takšne spremembe vrednosti v različnih delih kode pogosto zamenjujejo začetniki. Prav tako je prišlo do težav pri uporabi EM v CSS - pri nastavitvi velikosti pisave 0875 EM je bil vsak naslednji priključeni element zmanjšan. Neželeni učinki so povzročili uporabo te enote in spodnji rob. V tem primeru je velikost pisave vplivala na polja okrog elementa, kot je v EM neposredno povezan s tem parametrom blokovnega modela.

REM meritve v CSS

Oglejmo si, kaj je merilna enota REM in kako jo uporabljati. Prva omemba REM-a se je pojavila leta 2011 v komentarju nemškega razvijalca Gerrit van Aakena o uporabi pik v CSS kodi. Ta relativna enota je blizu vrednosti EM v svoji vrednosti, njeno ime pa je prevedeno kot "root EM" ali Root Em. REM vedenje je bolj predvidljivo. Uporaba te enote v postavitvi omogoča enostavno izračunavanje velikosti elementov v različnih delih kode, saj je REM v CSS enak vrednosti velikosti pisave, ki je določena za korenski element, oznako HTML. Pogosteje pa se ta vrednost doda tudi v telo, da se izključijo računske napake. Uporaba REM-a v CSS-ju, če njegova vrednost ni zapisana v oznako HTML, je še lažja. 1 REM bo enak standardnim 16 slikovnim pikam, kot v primeru EM, katerih vrednost ni nastavljena.

Spori ouporabite REM v CSS. REM proti EM

REM in EM imata svoje pluse in minuse. Med izvajalci je veliko polemik, katera relativna merska enota se uporablja pri pisanju kode. Domneva se, da uporaba REM-a v CSS naredi postavitev manj modularna, EM pa otežuje postavitev in zahteva previden pristop in izračune. Vsak monter v postopku dela izbere sam zase, katero mersko enoto in kje se uporablja. Toda v začetni fazi so piksli še boljši. EM je boljši za elemente, katerih lastnosti so prilagojene velikosti pisave. V drugih primerih je REM bolj primeren.

Uporaba REM-a v glavah

Razmislimo o tem, kako se bodo spremenile besedilne glave (oznake h1-h6), če so zapisane v REM. Predpostavimo, da glava vsebuje polja okoli njega - oblazinjenje, ozadje in določeno velikost pisave. Če želite povečati naslov, se bo prostor med robovi elementa zmanjšal, tako da bo potrebno oblazinjenje premagati. Ampak potem je problem z dejstvom, da vsi elementi preprosto prenehajo biti na strani. Vendar pa je nastavljena velikost pisave v slikovnih pikah, nato pa jo v nastavitvah brskalnika poskusite spremeniti v večje, nič se ne bo zgodilo. Ko uporabljate REM, se bo povečal in zmanjšal glede na nastavitve uporabnikov.

Omejitve na Root Em

REM pomaga ustvariti kaskadne tabele z različnimi velikostmi pisav za naslove in odstavke. Zelo poenostavi postavitev, saj ni potrebno popolnoma spreminjati kode - dovolj je, da spremenite velikost pisave v html oznaki. Obstaja tudi omejitev uporabe te enote. V starejših različicah brskalnikov Opera in IE ter vnekateri brskalniki Android še vedno niso podprti. Zato so razvijalci prisiljeni uporabljati piksle kot rezervno možnost in pisati dvojno kodo. Sodobni brskalniki bodo brali vrstice z velikostjo pisave v slikovnih pikah in jih prevedli v REM, zastareli pa preprosto ne bodo videli kode z neznano mersko enoto. Ampak, če ste pozabili na to in začeli razvijati spletno stran za določen zaslon, potem lahko izgubite veliko uporabnikov, ki preprosto ne morejo sprejeti vsebine, ki so bili razbiti z uporabo REM ali EM.

Novi načini za določanje velikosti besedila

Seznam velikosti CSS zdaj ne vključuje le zgoraj navedenih možnosti. Prišlo je do novih postavk:
  • VW - enaka širini brskalnika 1/100.
  • VMIN - 1/100 manjša stran okna brskalnika.
  • VMAX - 1/100 na večji strani okna brskalnika.
  • VH - enaka dolžini 1/100 brskalnika.
  • EX - Odvisno od višine črke "x" v malih črkah.
  • CH - se izračuna glede na simbol "0" v pisavi trenutnega elementa. Večina teh možnosti se uporablja tudi za oblikovanje prilagodljivih postavitev mesta, kjer se velikost vsebnika meri glede na velikost okna brskalnika. Toda za udobno skaliranje je stran običajno dovolj EM ali REM.
  • Sorodne publikacije