{"id":614,"date":"2023-02-22T14:23:50","date_gmt":"2023-02-22T13:23:50","guid":{"rendered":"https:\/\/dknzdesign.com\/?p=614"},"modified":"2023-02-22T14:28:21","modified_gmt":"2023-02-22T13:28:21","slug":"why-you-shouldnt-set-font-sizes-using-em","status":"publish","type":"post","link":"https:\/\/www.dknzdesign.com\/sl\/blog\/web-basics\/why-you-shouldnt-set-font-sizes-using-em\/","title":{"rendered":"Zakaj ne bi smeli nastavljati velikosti pisave z em"},"content":{"rendered":"
<\/div>\n\n\n\n
\"\"<\/figure>
\n

Ems ustvarjajo kaskadne u\u010dinke, jih je te\u017eko izra\u010dunati in ogro\u017eajo odzivne dizajne; uporabite piksle, odstotke ali \u0161e bolje uporabite rem!<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n

Ko gre za nastavitev velikosti pisave v CSS, se obi\u010dajno uporabljata dve relativni enoti: em in rem. Obe enoti sta relativni glede na velikost pisave nadrejenega elementa, vendar obstaja nekaj klju\u010dnih razlik med njima. V tej objavi v spletnem dnevniku bomo raziskali razlike med rem in em ter kdaj jih je najbolje uporabiti.<\/p>\n\n\n\n

Najprej opredelimo, kaj sta em in rem. Em je relativna merska enota, ki temelji na velikosti pisave nadrejenega elementa. Na primer, \u010de je velikost pisave elementa body 16px, potem bi bilo 1em enako 16px. \u010ce je velikost pisave podrejenega elementa nastavljena na 1,5 em, bi bila 1,5-krat ve\u010dja od velikosti pisave nadrejenega elementa.<\/p>\n\n\n\n

Rem je po drugi strani tudi relativna merska enota, vendar temelji na velikosti pisave korenskega elementa (obi\u010dajno elementa HTML). To pomeni, da \u010de je velikost pisave korenskega elementa nastavljena na 16 slikovnih pik, bi bil tudi 1rem enak 16 slikovnih pik, ne glede na to, kje v dokumentu je uporabljen.<\/p>\n\n\n\n

Torej, kak\u0161ne so razlike med em in rem? Glavna razlika je v tem, da so enote em relativne glede na velikost pisave nadrejenega elementa, medtem ko so enote rem relativne glede na velikost pisave korenskega elementa. To pomeni, da na enote rem ne vplivajo spremembe velikosti pisave nadrejenih elementov, medtem ko lahko na enote em vplivajo kaskadni u\u010dinki.<\/p>\n\n\n

\n
\"\"<\/a><\/svg><\/span><\/a><\/div><\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Druga razlika je v tem, da je enote rem la\u017eje izra\u010dunati kot enote em, zlasti ko imamo opravka z ugnezdenimi elementi. Ker enote rem temeljijo na korenskem elementu, vam pri nastavljanju velikosti pisave ni treba izra\u010dunati velikosti pisave vsakega nadrejenega elementa.<\/p>\n\n\n\n

Kdaj torej uporabiti em proti rem? Enote Em se najbolje uporabljajo za velikosti pisave, ki morajo biti relativne glede na velikost pisave dolo\u010denega nadrejenega elementa. Na primer, \u010de \u017eelite, da je velikost pisave podnaslova 1,2-krat ve\u010dja od velikosti pisave nadrejenega naslova, lahko za podnaslov uporabite 1,2em.<\/p>\n\n\n\n

Po drugi strani pa je enote Rem najbolje uporabiti za velikosti pisav, ki morajo biti dosledne v celotnem dokumentu, ne glede na to, kje se uporabljajo. Na primer, \u010de \u017eelite, da imajo vsi naslovi velikost pisave 2rem, lahko nastavite velikost pisave korenskega elementa na 16px in uporabite 2rem za vse naslove.<\/p>\n\n\n\n

Skratka, enoti em in rem sta uporabni za nastavitev velikosti pisave v CSS, vendar imata razli\u010dne primere uporabe. Enote em se najbolje uporabljajo za velikosti pisav, ki morajo biti relativne glede na velikost pisave dolo\u010denega nadrejenega elementa, medtem ko se enote rem najbolje uporabljajo za velikosti pisav, ki morajo biti skladne v celotnem dokumentu.<\/p>","protected":false},"excerpt":{"rendered":"

Ems create cascading effects, are hard to calculate, and compromise responsive designs; use pixels, percentages or even better use rem! When it comes to setting font sizes in CSS, there are two relative units that are commonly used: em and rem. Both units are relative to the font size of the parent element, but there…<\/p>","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,41,107],"tags":[],"class_list":["post-614","post","type-post","status-publish","format-standard","hentry","category-design","category-web-basics","category-web-development"],"_links":{"self":[{"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/posts\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":7,"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/posts\/614\/revisions\/639"}],"wp:attachment":[{"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dknzdesign.com\/sl\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}