Tiontaire PX go REM

Q: An é rem an rud céanna le em?

Ní hea ach ar eilimintí a n úsáideann a dtuismitheoir méid cló an fhréimhe. Féachann rem ar an eilimint html i gcónaí; féachann em ar an tuismitheoir, mar sin iolraíonn luachanna em neadaithe.

Tiontaire PX go REM

Tiontaigh px go rem agus em le haon mhéid cló fréimhe, tóg tábla tiontaithe mórchóir agus tiontaigh gach luach px de bhlúire CSS go rem le cliceáil amháin.

Méid cló an fhréimhe (px)

Coitianta:

Méid cló an tuismitheora le haghaidh em (px)

Tá em coibhneasta le méid cló na heiliminte tuismitheora, rem leis an eilimint fhréimhe (html).

Tiontaigh luach

Picteilíní (px) REM EM

Tábla tiontaithe mórchóir

Luachanna picteilíní (scartha le spásanna, camóga nó línte)

px	rem	em

Tiontaigh blúire CSS

CSS le tiontú

Coimeád leithead imill agus imlíne i px Coimeád luachanna 1px Tiontaigh ceisteanna meán go em (bonn 16px) Deachúlacha

CSS tiontaithe

Conas an tiontaire PX go REM a úsáid

Socraigh an Méid cló an fhréimhe (px). Is 16 é i ngach príomhbhrabhsálaí mura n-athraíonn do scarbhileog stíle é. Aistríonn na cnaipí faoin réimse go 16 px, 10 px (an cleas html { font-size: 62.5%; }) nó 18 px.
Má oibríonn tú le em, socraigh an Méid cló an tuismitheora le haghaidh em (px): méid cló ríofa na heiliminte ina bhfuil an ceann atá á stíliú agat.
Faoi Tiontaigh luach, clóscríobh i Picteilíní (px), REM nó EM. Nuashonraíonn an dá réimse eile agus tú ag clóscríobh, agus taispeánann an líne thíos an roinnt a úsáideadh.
Liostálann an Tábla tiontaithe mórchóir méideanna coitianta. Cuir do chomharthaí dearaidh féin (scála spásála, scála cló…) in ionad na Luachanna picteilíní agus úsáid Cóipeáil an tábla chun an toradh a ghreamú i scarbhileog nó i ndoiciméad dearaidh.
Chun cód atá ann cheana a aistriú, greamaigh é i CSS le tiontú, roghnaigh na roghanna agus cliceáil Tiontaigh px go rem. Taispeánann Luchtaigh sampla scarbhileog stíle bheag. Cóipeáil an CSS tiontaithe le Cóipeáil.

Ritheann an uirlis seo i do bhrabhsálaí. Ní chuirtear aon rud a ghreamaíonn tú chuig freastalaí.

Na foirmlí

rem = px ÷ méid cló an fhréimhe. Leis an réamhshocrú 16 px, 24px = 24 ÷ 16 = 1.5rem.
em = px ÷ méid cló an tuismitheora. Taobh istigh de cheannteideal 20 px, 10px = 0.5em.
px = rem × méid cló an fhréimhe, agus px = em × méid cló an tuismitheora.

rem nó em: cé acu ba cheart a úsáid?

Tagraíonn rem (“root em”) do mhéid cló na heiliminte html i gcónaí, mar sin ciallaíonn 1.5rem an rud céanna i ngach áit ar an leathanach. Is é an rogha is sábháilte é do mhéideanna cló, spásáil, uasleithid agus bearnaí leagan amach.

Tagraíonn em do mhéid cló na heiliminte féin (do font-size, an tuismitheora). Cuireann sé le chéile: críochnaíonn liosta ag 0.9em neadaithe faoi thrí ag 0.9 × 0.9 × 0.9 = 73 % den bhonn. Déanann sé sin em áisiúil do rudaí ba cheart a scálú lena dtéacs féin (padding cnaipe, méid deilbhín in aice le lipéad) agus contúirteach do chlóghrafaíocht dhomhanda.

Cén fáth a bhfuil rem tábhachtach don inrochtaineacht

Méadaíonn a lán daoine an méid cló réamhshocraithe i socruithe a mbrabhsálaí (mar shampla ó 16 go 20 nó 24 px) in ionad gach leathanach a zúmáil. Ní thugann méideanna i px aird ar an rogha sin; leanann méideanna i rem nó em í. Má úsáideann tú rem do théacs agus spásáil, fásann an leagan amach iomlán le rogha an léitheora, rud a chabhraíonn le critéar rathúlachta 1.4.4 WCAG 2.2 (athraigh méid téacs suas le 200 %).

Ar an gcúis chéanna, seachain html { font-size: 16px; } a shocrú i px: úsáid céatadán (100%, nó 62.5% más mian leat 1rem = 10px) ionas go bhfuil socrú an úsáideora i bhfeidhm fós.

Cad a athraíonn an tiontaire CSS

Cuireann sé an luach roinnte ar mhéid cló an fhréimhe in ionad uimhreacha a leanann px i ndearbhuithe. Ní bhaineann sé le tuairimí, le sreangáin ná le luachanna url() riamh.

Coimeád leithead imill agus imlíne i px: fanann border, border-*-width, outline, outline-offset agus column-rule i px, ionas go bhfanann línte tanaí géar. Tiontaítear border-radius fós.
Coimeád luachanna 1px: fanann aon luach idir −1px agus 1px mar atá sé.
Tiontaigh ceisteanna meán go em (bonn 16px): i gcoinníollacha @media, tagraíonn rem agus em do mhéid cló tosaigh an bhrabhsálaí i gcónaí, riamh do do riail html, mar sin roinneann an uirlis faoi 16 agus scríobhann sí em ansin, cibé méid fréimhe atá agat. Nuair nach bhfuil sé ticeáilte, coimeádann ceisteanna meán a px.

Ceisteanna coitianta

Cé mhéad picteilín atá in 1rem?

16 px de réir réamhshocraithe. Má shocraíonn do scarbhileog stíle html { font-size: 62.5%; }, is é 1rem = 10 px, agus fásann sé má mhéadaíonn an t-úsáideoir méid cló réamhshocraithe an bhrabhsálaí.

An é rem an rud céanna le em?

Ní hea ach ar eilimintí a n-úsáideann a dtuismitheoir méid cló an fhréimhe. Féachann rem ar an eilimint html i gcónaí; féachann em ar an tuismitheoir, mar sin iolraíonn luachanna em neadaithe.

Ar cheart dom imill a thiontú go rem?

De ghnáth ní ba cheart. Is féidir le himeall 1px a tiontaíodh go 0.0625rem teacht doiléir nó imeacht ar roinnt scáileán ag méideanna cló neamhghnácha. Sin é an fáth go bhfuil na roghanna imill agus 1px ar siúl de réir réamhshocraithe.

An ndéanann zúmáil an leathanaigh rem gan úsáid?

Ní dhéanann. Scálaíonn zúmáil bhrabhsálaí px agus rem cothrom, ach ní scálaíonn socrú an mhéid cló réamhshocraithe ach aonaid choibhneasta. Is cuid de rogha an léitheora a urramú tacú leis an dá cheann.

An seoltar mo CSS áit ar bith?

Ní sheoltar. Ritheann an tiontú go hiomlán i do bhrabhsálaí agus ní fhágann aon rud a ghreamaíonn tú do ghléas.