EM vienības mērogosjas attiecībā pret to vecākelementa fonta izmēru, padarot tās konteksta apzinīgas. Šī uzvedība atšķiras no REM vienībām, kas vienmēr atsaucas uz sakni. Nosaukums "em" nāk no tipogrāfijas — vēsturiski tas apzīmēja lielo burtu "M" platumu konkrētā fontā. Kad EM vienības spīd: Komponenta dizains: Iekšējās apmales un ārējās apmales, kas mērogosjas līdz ar fonta izmēru Tipogrāfija: Rindu augstumi labi darbojas ar bezizmēra vērtībām vai em (piemēram, line-height: 1.5em) Pašpietiekami moduļi: Pogas vai kartes, kas saglabā proporcijas, mainoties fonta izmēram Mediju vaicājumi: Saskaņā ar MDN Web Docs, EM vienības mediju vaicājumos atsaucas uz pārlūka noklusējuma fonta izmēru, nevis vecākelementa Uzkrāšanās lamata: Lūk, kur izstrādātāji bieži iestrēgst. EM vienības caursūcas cauri iekļautajiem elementiem, kas var radīt negaidītus rezultātus: Pēc trim iekļaušanas līmeņiem jūsu teksts ir izaudzis par 73% nevis paredzētajiem 20%. Tāpēc daudzi izstrādātāji pārgāja uz REM vienībām tipogrāfijai, tiklīdz uzlabojās pārlūku atbalsts.

PX uz REM uz EM pārveidotājs – Bezmaksas CSS vienību kalkulators

PX, REM un EM vienību pārveidotājs: Būtiskās CSS vienības skaidrotas

Kāpēc CSS vienību pārveidošana ir svarīga mūsdienu tīmekļa izstrādē

Veidojot atsaucīgas vietnes, viena no visizplatītākajām problēmām ir dizaina specifikāciju tulkošana elastīgās, mērogojamās CSS vienībās. Jūs, iespējams, esat redzējis Figma dizainu ar "padding: 24px" un domājis, vai atstāt to pikseļos vai pārveidot rem vienībās. Šis lēmums ietekmē visu, sākot no pieejamības līdz tam, kā jūsu izkārtojums reaģē, kad lietotāji pielāgo sava pārlūka fonta izmēru.

Šis PX, REM un EM vienību pārveidotājs palīdz ātri tulkot starp šīm trim pamatCSS vienībām. Pikseļi sniedz precīzu kontroli — lieliski robežām un sīkām detaļām. REM vienības mērogojas atbilstoši saknes fonta izmēram, padarot tās ideālas par konsekventu atstarpi un tipografiku visā jūsu vietnē. EM vienības mērogojas attiecībā pret to vecākelementu, kas ir ideāli pašpietiekamu komponentu izveidei, saglabājot proporcijas.

Sarežģītākā daļa? Pārveidošana starp tām prasa ņemt vērā fonta izmērus, kas atšķiras starp jūsu saknes elementu un atsevišķiem komponentiem. Izplatīta kļūda, ko es redzu izstrādātājus veicam, ir lietot pikseļus visur, jo šķiet vienkāršāk. Lai gan sākumā tas darbojas, tas rada pieejamības problēmas, kad lietotāji palielina sava pārlūka noklusējuma fonta izmēru — izkārtojums nepielāgojas proporcionāli.

CSS vienību izpratne: PX, REM un EM

Kas ir pikseļi (PX)?

Pikseļi (PX) ir visvienkāršākā CSS vienība — tas, ko jūs norādāt, ir tas, ko saņemat. CSS pikselis ir atsauces vienība, kas ne vienmēr atbilst fiziskam ekrāna pikselim (īpaši augstas izšķirtspējas displejiem, piemēram, Retina ekrāniem). Tie nodrošina fiksētu izmēru, kas nemainās atkarībā no fonta izmēriem vai vecākelementiem.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

Kad pikseļi darbojas labi:

Robežas un dalītāji (1px vai 2px robežas paliek asas)
Mazi, precīzi detaļi, kas nedrīkst mērogoties
Fiksēta platuma konteineri, kad nepieciešami precīzi izmēri
Ikonu izmēri, strādājot ar pikseļu precīzām sprite lapām

Problēma: Pikseļi neievēro lietotāja preferences. Ja kāds palielina pārlūka noklusējuma fonta izmēru no 16px uz 20px labākai salasāmībai, pikseļos balstītas izkārtnes paliek nemainīgas, potenciāli izraisot teksta pārplūdi vai saspiestus atstatumus.

Kas ir REM vienības?

REM (root em) vienības mērogojas atkarībā no saknes elementa fonta izmēra — parasti <html> elements. Lielākā daļa pārlūku noklusējumā ir 16px, tāpēc 1rem ir vienāds ar 16px, ja vien jūs nemainīsit saknes fonta izmēru. Lūk, kas padara REM vienības spēcīgas: tās nodrošina konsekventu, paredzamu mērogošanu visā jūsu vietnē.

1html {
2  font-size: 16px; /* Noklusējums lielākajā daļā pārlūku */
3}
4
5.element {
6  width: 12.5rem; /* Ekvivalents 200px ar noklusējuma saknes fonta izmēru */
7  font-size: 1rem; /* Ekvivalents 16px */
8  margin: 0.625rem; /* Ekvivalents 10px */
9}
10

Kāpēc izstrādātāji dod priekšroku REM vienībām:

Konsekventā mērogošana: Mainot saknes fonta izmēru, viss mērogosies proporcionāli
Pieejamības atbilstība: Kad lietotāji pielāgo pārlūka fonta izmēru, REM balstītas izkārtnes pielāgojas automātiski
Vieglāka uzturēšana: Atjauniniet atstarpes vērtības vienā vietā, nevis meklējot pikseļu vērtības
Nav uzkrāšanās problēmu: Atšķirībā no EM vienībām, REM vienības neuzkrājas, kad elementi ir iekļauti

Profesionāls padoms no pieredzes: Iestatiet saknes fonta izmēru uz 62.5% (kas padara 1rem = 10px ar noklusējuma 16px bāzi). Tas padara mentālo matemātiku vieglāku — 1.6rem = 16px, 2.4rem = 24px. Tikai atcerieties iestatīt sava pamata fonta izmēru atpakaļ uz 1.6rem, lai teksts pēc noklusējuma būtu 16px. Saskaņā ar W3C CSS vērtību un vienību specifikāciju, REM vienības vienmēr atsaucas uz saknes elementu, padarot tās paredzamas sarežģītās izkārtņēs.

Kas ir EM vienības?

EM vienības mērogosjas attiecībā pret to vecākelementa fonta izmēru, padarot tās konteksta apzinīgas. Šī uzvedība atšķiras no REM vienībām, kas vienmēr atsaucas uz sakni. Nosaukums "em" nāk no tipogrāfijas — vēsturiski tas apzīmēja lielo burtu "M" platumu konkrētā fontā.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* Ekvivalents 16px (20px × 0.8) */
7  margin: 0.5em; /* Ekvivalents 8px (16px × 0.5) */
8}
9

Kad EM vienības spīd:

Komponenta dizains: Iekšējās apmales un ārējās apmales, kas mērogosjas līdz ar fonta izmēru
Tipogrāfija: Rindu augstumi labi darbojas ar bezizmēra vērtībām vai em (piemēram, line-height: 1.5em)
Pašpietiekami moduļi: Pogas vai kartes, kas saglabā proporcijas, mainoties fonta izmēram
Mediju vaicājumi: Saskaņā ar MDN Web Docs, EM vienības mediju vaicājumos atsaucas uz pārlūka noklusējuma fonta izmēru, nevis vecākelementa

Uzkrāšanās lamata: Lūk, kur izstrādātāji bieži iestrēgst. EM vienības caursūcas cauri iekļautajiem elementiem, kas var radīt negaidītus rezultātus:

1.level-1 { font-size: 1.2em; }  /* 19.2px, ja vecākelements ir 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Pēc trim iekļaušanas līmeņiem jūsu teksts ir izaudzis par 73% nevis paredzētajiem 20%. Tāpēc daudzi izstrādātāji pārgāja uz REM vienībām tipogrāfijai, tiklīdz uzlabojās pārlūku atbalsts.

Konversijas formulas un aprēķini

Izpratne par matemātiskajām attiecībām starp PX, REM un EM vienībām ir būtiska precīzām konversijām. Šeit ir formulas, kas tiek izmantotas mūsu konvertētājā:

PX uz REM konversija

Lai pārvērstu pikseļus REM vienībās, daliet pikseļu vērtību ar saknes fonta izmēru:

$REM = \frac{PX}{saknesFontaIzmērs}$

Piemēram, ar noklusēto saknes fonta izmēru 16px:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX uz EM konversija

Lai pārvērstu pikseļus EM vienībās, daliet pikseļu vērtību ar vecākelementa fonta izmēru:

$EM = \frac{PX}{vecākaElementaFontaIzmērs}$

Piemēram, ar vecākelementa fonta izmēru 16px:

16px = 1em
24px = 1.5em
8px = 0.5em

REM uz PX konversija

Lai pārvērstu REM vienības pikseļos, reiziniet REM vērtību ar saknes fonta izmēru:

$PX = REM \times saknesFontaIzmērs$

Piemēram, ar noklusēto saknes fonta izmēru 16px:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM uz PX konversija

Lai pārvērstu EM vienības pikseļos, reiziniet EM vērtību ar vecākelementa fonta izmēru:

$PX = EM \times vecākaElementaFontaIzmērs$

Piemēram, ar vecākelementa fonta izmēru 16px:

1em = 16px
1.5em = 24px
0.5em = 8px

REM uz EM konversija

Lai pārvērstu REM vienības EM vienībās, jāņem vērā gan saknes fonta izmērs, gan vecākelementa fonta izmērs:

$EM = REM \times \frac{saknesFontaIzmērs}{vecākaElementaFontaIzmērs}$

Ja gan saknes, gan vecākelementa fonta izmēri ir vienādi (piem., 16px), tad 1rem = 1em.

EM uz REM konversija

Lai pārvērstu EM vienības REM vienībās, izmantojiet šādu formulu:

$REM = EM \times \frac{vecākaElementaFontaIzmērs}{saknesFontaIzmērs}$

Atkal, ja abi fonta izmēri ir vienādi, tad 1em = 1rem.

Kā lietot PX uz REM uz EM vienību pārveidotāju

Precīzas pārveidošanas iegūšana ir vienkārša ar šo rīku. Galvenais ir saprast, kādus fonta izmērus izmantot konkrētajā situācijā.

Ātro sākumu ceļvedis

Ievadiet savu vērtību jebkurā laukā—pikseļos, REM vai EM
Pārbaudiet rezultātus uzreiz citās divās vienībās
Pielāgojiet fonta izmērus atbilstoši jūsu projektam:
- Saknes fonta izmērs: Ko esat iestatījis savā <html> elementā (parasti 16px)
- Vecākelementa fonta izmērs: Konkrētā elementa vecākelementa fonta izmērs (arī parasti 16px)
Nokopējiet vajadzīgo vērtību, izmantojot kopēšanas pogu

Precīzu rezultātu iegūšana jūsu projektam

Pārveidotājs pēc noklusējuma izmanto 16px gan saknes, gan vecākelementa fonta izmēram, jo tas ir pārlūkprogrammas standarts. Bet svarīgs ir tas: jūsu faktiskais projekts var izmantot atšķirīgas vērtības.

Saknes fonta izmēra atrašana: Atveriet pārlūkprogrammas izstrādātāju rīkus, pārbaudiet <html> elementu un pārbaudiet aprēķināto fonta izmēru. Ja esat iestatījis html { font-size: 62.5%; }, jūsu saknes fonta izmērs ir 10px (62.5% no 16px).

Vecākelementa fonta izmēra atrašana: EM pārveidošanai jums vajag konkrētā vecākelementa fonta izmēru, kur jūs lietojat stilu. Pārbaudiet šo elementu izstrādātāju rīkos, lai redzētu tā aprēķināto fonta izmēru. Ja vecākelementam ir font-size: 1.2rem un jūsu sakne ir 16px, iestatiet vecākelementa fonta izmēru uz 19.2px precīzām EM aprēķinām.

Bieži sastopamās pārveidošanas situācijas

No dizaina uz kodu: Jūsu Figma failā redzams padding: 24px. Vēlaties izmantot REM vienības labākai pieejamībai. Ievadiet 24 PX laukā, un redzēsiet, ka tas ir 1.5rem (pieņemot 16px sakni).

Pogas komponenta veidošana: Vēlaties, lai atkāpe mainītos līdzi pogas fonta izmēram. Ja pogai ir font-size: 1.125rem (18px), iestatiet vecākelementa fonta izmēru uz 18, ievadiet vēlamo pikseļu atkāpi un izmantojiet iegūto EM vērtību.

Atsaucīga tipografija: Veidojat virsrakstu, kas ir 32px uz datora. Ievadiet 32px, lai redzētu, ka tas ir 2rem, kas atbilstoši mainīsies, kad lietotāji pielāgo pārlūkprogrammas fonta izmēru.

Reālas pasaules CSS vienību pārveidošanas lietošanas gadījumi

Zināt formulas ir viena lieta — efektīvi tās pielietot ražošanas kodā ir kas cits. Tieši šeit vienību pārveidošana padara taustāmu atšķirību jūsu projektos.

Dizaina failu pārveidošana atsaucīgā CSS

Jūs saņemat Figma dizainu, kur viss norādīts pikseļos. Kartes komponents rāda:

Iekšējais atstatums: 24px
Virsraksta fonta izmērs: 28px
Satura fonta izmērs: 16px
Apakšējais atkāpums: 40px

Pārveidojot šos REM vienībās (pieņemot 16px sakni) jūs iegūstat:

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

Kāds ir ieguvums? Kad lietotājs ar redzes traucējumiem palielina sava pārlūka noklusējuma fonta izmēru no 16px uz 20px, jūsu karte proporcionāli palielinās. Iekšējie atstatumi, malas un teksts visi palielinās par 25%, saglabājot dizaina vizuālo līdzsvaru. Ar pikseļu vērtībām tikai teksts palielinātos, bojājot izkārtojumu.

[Pārējā tulkojuma saturs turpinās tādā pašā stilā, saglabājot visu markdown formatējumu un tehniskos terminus]

Kā CSS vienības attīstījās: No fiksētām līdz elastīgām

Pāreja no pikseļiem uz relatīvām vienībām atspoguļo tīmekļa ceļojumu no statiskiem dokumentiem līdz atsaucīgām lietotnēm. Šīs vēstures izpratne skaidro, kāpēc mēs šodien konvertējam starp vienībām.

Pikseļu precīzais laikmets (1990.-2000. gadi)

Sākotnējās tīmekļa vietnes tika veidotas konkrētām ekrāna platumiem - 640px, tad 800px, tad 1024px. CSS izkārtojumi izmantoja tikai pikseļus, jo tā darīja drukas dizaineri. Vietnes izskatījās identiskas dažādos pārlūkprogrammos (kad tās vispār darbojās), bet pilnībā salūza negaidītos ekrāna izmēros. Tīmeklis tika uztveris kā druka: fiksēts, kontrolēts, paredzams.

EM vienības jau eksistēja CSS specifikācijā, mantots no tipogrāfijas, bet lielākā daļa izstrādātāju tās izvairījās izmantot. Uzkrājošā uzvedība bija sarežģīta, un nebija mobilo ierīču, kas liktu domāt elastīgi.

Mobilais modinātājs (2007-2010)

iPhone mainīja visu. Pēkšņi ievērojama daļa satiksmes nāca no 320px platām ekrāniem. Palielināšana ar pirkstiem palīdzēja, bet tīmekļa vietnes, kas projektētas 1024px datoriem, bija mokošas mobilajās ierīcēs.

Etana Marsotes 2010. gada raksts par atsaucīgu tīmekļa dizainu kristalizēja jaunu pieeju: plūstošas restes, elastīgas bildes un mediju vaicājumi. Relatīvas vienības kļuva būtiskas, nevis izvēles. Tomēr EM vienību uzkrājošā uzvedība radīja kļūdas sarežģītos izkārtojumos.

REM vienības glābj dienu (2010-Pašlaik)

CSS3 ap 2010. gadu ieviesa REM vienību, atrisinot EM lielāko problēmu: uzkrāšanos. REM mums deva relatīvu mērogošanu bez mantošanas sarežģītības. Internet Explorer 9 pievienoja atbalstu 2011. gadā, un līdz 2015. gadam REM vienības bija kļuvušas par standartu.

Šodien labākās prakses apvieno vienības stratēģiski. REM - tipogrāfijai un atstarpēm. EM - komponentes iekšējām proporcijām. Pikseļi - sīkām detaļām. Mūsdienu CSS funkcijas kā clamp() dinamiski sajauc šīs vienības, radot izkārtojumus, kas pielāgojas jebkuram kontekstam.

Šī evolūcija - no stingriem pikseļiem līdz elastīgām relatīvām vienībām - atspoguļo lietotāju gaidu maiņu no "tīmekļa vietnēm jāizskatās vienādi visur" uz "tīmekļa vietnēm jādarbojas labi visur".

Kodu piemēri vienību pārveidošanai

JavaScript vienību pārveidotāja funkcijas

1// Pārveidot starp PX, REM un EM vienībām
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// Lietošanas piemērs
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

CSS pielāgotās īpašības vienību pārveidošanai

1:root {
2  /* Bāzes fonta izmēri */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Bieži lietotās pikseļu vērtības pārveidotas REM */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* Tipografijas mērogs */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* Lietošanas piemērs */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

SCSS miksīni vienību pārveidošanai

1// SCSS funkcijas vienību pārveidošanai
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// Lietošanas piemērs
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // Izmantojot vecāka fonta izmēru (18px) em pārveidošanai
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python vienību pārveidotājs

1def px_to_rem(px, root_font_size=16):
2    """Pārveidot pikseļus uz REM vienībām"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Pārveidot REM vienības uz pikseļiem"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Pārveidot pikseļus uz EM vienībām"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Pārveidot EM vienības uz pikseļiem"""
15    return em * parent_font_size
16
17# Lietošanas piemērs
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

Bieži kļūdaini CSS vienību pārveidošanas paņēmieni

Pēc simtiem kodabāzu pārskatīšanas, esmu pamanījis šīs kļūdas, kas atkārtojas bieži. To izvairīšanās ietaupīs jums atkļūdošanas laiku.

Kļūda 1: Neņemot vērā pielāgotus saknes fonta izmērus

Problēma: Jūs pārveidojat 24px uz 1.5rem, pieņemot noklusēto 16px saknes fonta izmēru, bet jūsu projektā ir html { font-size: 62.5%; }, kas padara sakni 10px. Jūsu elements beidzas 15px vietā 24px.

Risinājums: Vienmēr pārbaudiet sava projekta faktisko saknes fonta izmēru pirms pārveidošanas. Iestatiet pārveidotāja saknes fonta izmēru, lai tas atbilstu jūsu projekta realitātei.

Kļūda 2: EM vienību izmantošana tipográfijai ligzdotās komponentēs

Problēma: Jūs izveidojat kartes komponenti ar font-size: 1.2em virsrakstiem. Darbojas lieliski. Tad jūs ievietojat karti citā kartē, un pēkšņi iekšējās kartes virsraksts ir 1.44em (1.2 × 1.2), nevis 1.2em.

Risinājums: Izmantojiet REM vienības tipográfijai, ja vien jūs īpaši nevēlaties kaskadēšanas uzvedību. Saglabājiet EM vienības atkāpēm, kas jāmērogot atbilstoši lokālajam fonta izmēram.

Kļūda 3: Robežu platumu pārveidošana uz REM

Problēma: Jūs pārveidojat border: 1px uz border: 0.0625rem konsekvencei. Kad lietotāji tuvina vai maina fonta izmērus, jūsu robežas kļūst resnas un neglītas.

Risinājums: Saglabājiet robežas pikseļos. Apakšpikseļu robežām (0.5px) ir nekonsekventa pārlūka atbalsta, un robežām reti kad vajag mērogties līdzi tekstam.

Kļūda 4: Aizmirstot, ka mediju pieprasījumu vienības atsaucas uz lietotāja preferences

Problēma: Jūs rakstāt @media (min-width: 768px) planšetes pārrāvuma punktam. Lietotāji, kas iestatījuši lielāku noklusēto fonta izmēru, nesaņem planšetes izkārtojumu, kad tam vajadzētu būt.

Risinājums: Izmantojiet EM vai REM vienības mediju pieprasījumos: @media (min-width: 48em). Tas respektē lietotāja fonta preferences, kā ieteikts MDN atsaucīgās dizaina dokumentācijā.

Kļūda 5: Jaukot aprēķinu metodes

Problēma: Jūsu Sass izmanto vienu aprēķinu metodi, jūsu JavaScript izmanto citu, un jūsu prāta matemātika izmanto trešo. Rezultāti nesakrīt, izraisot pikseļu stumšanas vilšanos.

Risinājums: Izmantojiet šo pārveidotāju kā patiesības avotu. Saglabājiet to grāmatzīmēs, atsaucieties uz to kodu pārskatīšanas laikā un nodrošiniet, ka visa jūsu komanda izmanto vienādu pārveidošanas metodiku.

Bieži uzdotie jautājumi

Kāda ir atšķirība starp REM un EM vienībām?

Atskaites punkts atšķiras pilnīgi. REM vienības vienmēr skatās uz saknes <html> elementa fonta izmēru — neatkarīgi no tā, cik dziļi elements ir iedarināts, 1rem vienmēr ir vienāds ar to pašu aprēķināto vērtību. EM vienības skatās uz to tiešā vecāka fonta izmēru, kas rada kaskadēšanas efektu.

Domājiet par to šādi: ja jūs iedarināt trīs <div> elementus, katram ar font-size: 1.2em, visdziļākā div teksts būs ievērojami lielāks, nekā gaidījāt, jo katra līmeņa izmērs tiek reizināts. Ar font-size: 1.2rem katrā līmenī visiem trim div elementiem būs identisks fonta izmērs, jo tie visi atsaucas uz sakni.

Tāpēc REM kļuva populārs tipográfijā, kad uzlabojās pārlūkprogrammu atbalsts — tas novērš mantojamības ķēžu izsekošanas garlaicīgo procesu.

Kāda CSS vienība ir vislabākā atsaucīgai tīmekļa dizainā?

Nav vienas vienīgās vienības, kas uzvarētu katrā situācijā. Labākie atsaucīgie dizaini apvieno vienības stratēģiski:

Izmantojiet REM: Globālām atstarpēm, tipográfijas skalām, komponenšu atstarpēm un jebkuram mērījumam, kas būtu jāmērogot atbilstoši lietotāja fonta preferences

Izmantojiet EM: Komponenšu iekšējām atstarpēm (pogu polsterējums, karšu atstarpes), mediju vaicājumiem (tie respektē lietotāja preferences) un elementiem, kas būtu jāmērogo to lokālajā kontekstā

Izmantojiet pikseļus: 1px robežām (tās izskatās asas), ēnu lodziņiem (smalkām ēnām nepieciešama precizitāte) un SVG līniju biezumiem

Izmantojiet procentus vai skata loga vienības: Konteineru platumiem, pilna augstuma sadaļām

Esmu redzējis kodu bāzes, kas mēģina visur izmantot vienu vienību — tas vienmēr rada uzturēšanas grūtības. Izmantojiet katru vienību tur, kur tā sniedz vislielāko ieguvumu.

[Tulkojums turpinās...]

Atsauces un papildu literatūra

"CSS vērtības un vienības modulis 3. līmenis." W3C ieteikums. https://www.w3.org/TR/css-values-3/
Marcotte, Etans. "Atsaucīgs tīmekļa dizains." A List Apart, 2010. gada 25. maijs. https://alistapart.com/article/responsive-web-design/
Rutter, Ričards. "Tipografiskā stila elementi, piemēroti tīmeklim." http://webtypography.net/
"CSS vienības." MDN tīmekļa dokumentācija. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS pikseļi pret fiziskajiem pikseļiem." Stack Overflow dokumentācija. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Kojer, Kriss. "CSS garumi." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"CSS pielāgoto īpašību (mainīgo) izmantošana." MDN tīmekļa dokumentācija. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"rem vienību izpratne un izmantošana CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Sāciet precīzi pārveidot CSS vienības

Manuāla CSS vienību pārveidošana ir nogurdinoša un kļūdām pakļauta. Jūs veicat prāta matemātiku, šaubāties par aprēķiniem un cerat, ka fontu izmēri ir pareizi. Šis PX uz REM uz EM pārveidotājs likvidē šo berzi.

Ievadiet pikseļu vērtības no dizaina failiem, pielāgojiet fontu izmērus atbilstoši jūsu projekta konfigurācijai un uzreiz iegūstiet precīzas REM un EM vērtības. Kopējiet tās tieši savā kodā. Vai jūs ieviešat jaunu dizaina sistēmu, pielāgojat esošo kodu ar relatīvām vienībām vai vienkārši mēģināt saprast, kā šīs vienības attiecas cita pret citu, pārveidotājs veic matemātiku, lai jūs varētu fokusēties uz būvēšanu.

Izstrādātājiem, kas strādā pie pieejamības prasībām atbilstošām vietnēm, šis rīks palīdz nodrošināt, ka izkārtojumi pareizi mērogosies, kad lietotāji pielāgo savas fontu preferences — prasība saskaņā ar WCAG 2.1 līmeni AA. Tiem, kas veido komponentu bibliotēkas, tas skaidro, kādas EM vērtības rada vēlamos proporcijas. Ikvienam, kas pārveido Figma dizainus ražošanas CSS, tas ievērojami paātrina pārveidošanas darplūsmu.

Formulas ir balstītas uz W3C CSS vērtību un vienību moduļa specifikāciju, nodrošinot, ka pārveidošana atbilst tam, kā pārlūki faktiski aprēķina šīs vērtības.