Déift Ënnerhaalung vu Schrëftgréisst (PX vs EM vs REM)

Verständnis vun der Schrëftgréisst

Schrëftgréisst spillt eng ganz wichteg Roll am Web, Schrëftgréisst ass eng vun den CSS Eegeschaften, D'Schrëftgréisst oder Textgréisst definéieren ass wéi grouss d'Zeechen op enger Websäit ugewisen ginn. eng Schrëft gëtt normalerweis a Punkte gemooss (pt) an definéiert sech dacks a Pixel (px).

Andeems Dir d'Basis Schrëftgréisst (Body Font-Gréisst) vun all Websäit defultéiert ass 16px, bis mir eng eege personaliséiert Schrëftgréisst definéieren.
D'Schrëftgréisst Eegeschafte gëtt op eng vun de folgende Weeër spezifizéiert:

1. Absolute-Gréisst oder Relativ-Gréisst
2. Als Längt oder Prozentsaz (relativ zu der Schrëftgréisst vum Elterendeel)

Basis Syntax

Basis Syntax vu Schrëft

Absolut-Gréisst
xx-kleng, x-kleng, kleng, xx-grouss, x-grouss, grouss
Schrëftgréisst mat Absolut-Gréisst Schlësselwieder, wäert méi grouss oder méi kleng sinn relativ zu der Schrëftgréisst vum Elterendeel.

Relativ Gréisst
méi kleng, méi grouss

Längt-Gréisst
Schrëftgréisst an der Längt definéiert wäert ëmmer e positiven Wäert hunn, benotzte Schrëft-relativer Eenheeten wéi em an px

Prozentsaz-Gréisst
Schrëftgréisst mat Prozentsaz wäert ëmmer e positive Wäert hunn a relativ zu der Schrëftgréisst vum Elterendeel

Definéieren Schrëftgréisst a Kierper

Definéieren vun der Schrëftgréisst am Kierper ass déi bescht Approche fir eng Websäit z'entwéckelen. Andeems Dir eng Schlësselwuert Schrëftgréisst op de Kierperelement setzt, kënnt Dir de relativen Schrëftgréisst anzwousch anescht op der Säit setzen, sou datt Dir d'Fähegkeet hutt fir d'Schrëft einfach op oder op déi ganz Säit deementspriechend ze skalaen.

Schrëftgréisst am Pixel (Px)

Schrëftgréisst am Pixel ze definéieren ass keng gutt Praxis. Dëst wäert nëmme gutt sinn wann Dir de Pixel perfekt Design managen.
 Pixel (px) ass e statesche Wäert, px ass en OS-onofhängeg a Cross-Browser sot de Browser fir d'Bréiwer op exakt d'Zuel vun de Pixel an der Héicht ze maachen déi Dir uginn hutt. D'Resultater kënne liicht an de Browser variéieren, well all Browser verschidde Algorithmen benotzen an Approche fir en ähnlechen Effekt ze erreechen.
 Wann Dir Schrëftgréisst am Pixel (px) definéiert, kënnt Dir konfrontéiert fir e puer extra CSS ze schreiwen fir dës Säit reaktiounsfäeg ze managen. an Dir musst d'Css an all Break Punkte schreiwen.

Schrëftgréisst An EM

Eng aner Manéier fir d'Schrëftgréisst ze definéieren ass mat em Wäerter. D'Gréisst vun engem em Wert ass dynamesch. wa mir d'Schrëftgréisst an hinnen definéieren, hänkt et vun der Gréisst vum Elterendeel of.
 wa mir d'Schrëftgréisst net fir den Elterendeel gesat hunn, da wäert et als Standard de Browser Schrëftgréisst huelen, dat ass 16px.
 Déi wichtegst Saache fir mat hinnen ze wëssen ass dat, et hänkt ëmmer vun der Schrëftgréisst vum Elterendeel of. also wann Dir d'Schrëft am genauten Element definéiert, da sollt Dir dëst am Kapp behalen fir d'Schrëftgréisst z'änneren.

Pixel an em Konversioun

Schrëftgréisst An REM

D'Schrëftgréisst Rem Wäerter goufen erfonnt fir de Problem vun em mat genesten Element ze bewältegen.
 D'Schrëftgréisst Rem Wäerter si relativ zum Root HTML Element, net dem Elterendeel, Rescht alles ass d'selwecht wéi em.
 Drënner ass déi verschidde tëscht Rem an em wann et nestéiert Elementer gëtt.

Ënnerscheed tëscht nestéierten Elementer Mat EM a REM

Nascht Element Mat EMNascht Element mam REM

Ref: https://developer.mozilla.org/en-US/docs/Web