Penukar Unit PX, REM, dan EM: Penjelasan Unit CSS yang Penting

Pengenalan kepada Penukaran Unit CSS

Memahami dan menukar antara unit CSS adalah penting untuk reka bentuk dan pembangunan web yang responsif. Unit PX (piksel), REM (root em), dan EM adalah blok bangunan asas yang menentukan bagaimana elemen disesuaikan dan diposisikan di seluruh peranti dan saiz skrin yang berbeza. Alat penukar unit yang komprehensif ini membolehkan anda dengan mudah menterjemahkan nilai antara ketiga-tiga unit CSS yang penting ini, membantu anda mencipta susun atur web yang lebih fleksibel dan mudah diselenggara.

Piksel (PX) adalah unit saiz tetap yang memberikan kawalan yang tepat tetapi kurang skala, sementara unit REM berskala berbanding dengan saiz fon elemen akar, dan unit EM berskala berbanding dengan saiz fon elemen induknya. Menukar antara unit-unit ini boleh menjadi cabaran, terutamanya apabila bekerja dengan reka bentuk yang kompleks atau ketika menyokong ciri aksesibiliti seperti pembesaran teks. Penukar PX, REM, dan EM kami menyederhanakan proses ini, membolehkan anda memberi tumpuan kepada penciptaan reka bentuk yang cantik dan responsif.

Memahami Unit CSS: PX, REM, dan EM

Apa itu Piksel (PX)?

Piksel (PX) adalah unit CSS yang paling asas dan biasa digunakan. Piksel adalah satu titik tunggal dalam grid imej digital dan mewakili elemen terkecil yang boleh dikawal pada skrin. Dalam CSS, piksel menyediakan unit ukuran saiz tetap yang kekal konsisten tanpa mengira faktor gaya lain.

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

Ciri-ciri utama piksel:

Unit saiz tetap yang tidak berskala secara automatik
Memberikan kawalan yang tepat ke atas dimensi elemen
Mudah difahami dan divisualisasikan
Kurang ideal untuk reka bentuk responsif dan aksesibiliti

Apa itu Unit REM?

Unit REM (root em) adalah unit relatif yang berskala berdasarkan saiz fon elemen akar (biasanya elemen <html>). Secara lalai, kebanyakan pelayar menetapkan saiz fon akar kepada 16px, menjadikan 1rem sama dengan 16px kecuali diubah secara eksplisit.

1html {
2  font-size: 16px; /* Lalai dalam kebanyakan pelayar */
3}
4
5.element {
6  width: 12.5rem; /* Setara dengan 200px dengan saiz fon akar lalai */
7  font-size: 1rem; /* Setara dengan 16px */
8  margin: 0.625rem; /* Setara dengan 10px */
9}
10

Ciri-ciri utama unit REM:

Berskala berbanding dengan saiz fon elemen akar
Menjaga proporsi yang konsisten di seluruh dokumen
Menyokong aksesibiliti yang lebih baik melalui penyesuaian saiz fon global
Ideal untuk susun atur dan tipografi responsif

Apa itu Unit EM?

Unit EM adalah unit relatif yang berskala berdasarkan saiz fon elemen induknya. Jika tiada saiz fon yang ditentukan untuk elemen induk, EM akan merujuk kepada saiz fon yang diwarisi.

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

Ciri-ciri utama unit EM:

Berskala berbanding dengan saiz fon elemen induknya
Mencipta kesan cascading apabila bersarang
Berguna untuk mencipta reka bentuk proporsional dalam komponen
Boleh menjadi kompleks untuk diurus dengan elemen yang bersarang dalam

Formula dan Pengiraan Penukaran

Memahami hubungan matematik antara unit PX, REM, dan EM adalah penting untuk penukaran yang tepat. Berikut adalah formula yang digunakan dalam penukar kami:

Penukaran PX ke REM

Untuk menukar piksel kepada unit REM, bahagikan nilai piksel dengan saiz fon akar:

$REM = \frac{PX}{rootFontSize}$

Sebagai contoh, dengan saiz fon akar lalai 16px:

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

Penukaran PX ke EM

Untuk menukar piksel kepada unit EM, bahagikan nilai piksel dengan saiz fon elemen induk:

$EM = \frac{PX}{parentFontSize}$

Sebagai contoh, dengan saiz fon induk 16px:

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

Penukaran REM ke PX

Untuk menukar unit REM kepada piksel, kalikan nilai REM dengan saiz fon akar:

$PX = REM \times rootFontSize$

Sebagai contoh, dengan saiz fon akar lalai 16px:

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

Penukaran EM ke PX

Untuk menukar unit EM kepada piksel, kalikan nilai EM dengan saiz fon elemen induk:

$PX = EM \times parentFontSize$

Sebagai contoh, dengan saiz fon induk 16px:

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

Penukaran REM ke EM

Untuk menukar unit REM kepada unit EM, anda perlu mengambil kira saiz fon akar dan saiz fon elemen induk:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

Jika kedua-dua saiz fon adalah sama (contohnya, 16px), maka 1rem = 1em.

Penukaran EM ke REM

Untuk menukar unit EM kepada unit REM, gunakan formula berikut:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

Sekali lagi, jika kedua-dua saiz fon adalah sama, maka 1em = 1rem.

Cara Menggunakan Penukar Unit PX, REM, dan EM

Alat penukar unit kami memudahkan untuk menterjemahkan nilai antara unit PX, REM, dan EM. Berikut adalah panduan langkah demi langkah untuk menggunakan penukar dengan berkesan:

Penggunaan Asas

Masukkan nilai dalam mana-mana medan input (PX, REM, atau EM)
Penukar akan secara automatik mengira dan memaparkan nilai setara dalam dua unit yang lain
Sesuaikan saiz fon akar (lalai: 16px) untuk melihat bagaimana ia mempengaruhi penukaran REM
Sesuaikan saiz fon induk (lalai: 16px) untuk melihat bagaimana ia mempengaruhi penukaran EM
Gunakan butang salin di sebelah setiap medan untuk menyalin nilai ke papan klip anda

Ciri-ciri Lanjutan

Perbandingan visual: Alat ini menyediakan representasi visual tentang saiz relatif setiap unit
Kawalan ketepatan: Semua pengiraan mengekalkan 4 tempat perpuluhan untuk ketepatan
Nilai negatif: Penukar menyokong nilai negatif, yang sah dalam CSS untuk sifat seperti margin
Kemas kini masa nyata: Sebarang perubahan pada nilai input atau tetapan saiz fon mengemas kini semua pengiraan serta-merta

Petua untuk Penukaran yang Tepat

Untuk penukaran REM yang paling tepat, tetapkan saiz fon akar untuk sepadan dengan nilai saiz fon <html> projek anda
Untuk penukaran EM yang tepat, tetapkan saiz fon induk untuk sepadan dengan saiz fon elemen induk yang anda sedang kerjakan
Ingat bahawa saiz fon lalai pelayar mungkin berbeza, walaupun 16px adalah lalai yang paling biasa

Kes Penggunaan Praktikal untuk Penukaran Unit CSS

Memahami bila untuk menggunakan setiap unit CSS dan bagaimana untuk menukar antara mereka adalah penting untuk pembangunan web yang berkesan. Berikut adalah beberapa aplikasi praktikal dan senario di mana penukar unit kami terbukti tidak ternilai:

Reka Bentuk Web Responsif

Menukar antara unit adalah penting untuk mencipta reka bentuk yang benar-benar responsif:

Pendekatan berasaskan mudah alih: Mulakan dengan reka bentuk asas dalam piksel, kemudian tukar kepada unit relatif untuk kebolehsesuaian
Pengurusan titik putus: Gunakan REM untuk jarak yang konsisten di seluruh saiz viewport yang berbeza
Penskalakan komponen: Pastikan elemen UI mengekalkan hubungan proporsional apabila viewport berubah

1/* Tukar nilai piksel tetap kepada unit REM responsif */
2.container {
3  /* Dari: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* Dari: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

Peningkatan Aksesibiliti

Menggunakan unit relatif meningkatkan aksesibiliti dengan menghormati pilihan pengguna:

Pembesaran teks: Apabila pengguna mengubah saiz fon pelayar mereka, susun atur berasaskan REM menyesuaikan dengan sewajarnya
Fungsi zum: Unit relatif memastikan reka bentuk kekal proporsional apabila pengguna memperbesar
Menghormati pilihan pengguna: Susun atur yang berasaskan unit relatif menghormati tetapan saiz fon lalai pengguna

Sistem Reka Bentuk Berasaskan Komponen

Sistem reka bentuk moden mendapat manfaat daripada penggunaan unit yang bijak:

Komponen yang konsisten: Gunakan REM untuk konsistensi jarak dan saiz global
Modul yang berdiri sendiri: Gunakan EM untuk elemen yang harus berskala dengan komponen induknya
Token reka bentuk: Tukar antara unit semasa melaksanakan token reka bentuk di seluruh konteks yang berbeza

Sistem Tipografi

Mencipta tipografi yang harmoni memerlukan pemilihan unit yang teliti:

Skala jenis: Definisikan skala tipografi dalam REM untuk progresi yang konsisten
Ketinggian baris: Gunakan nilai tanpa unit atau EM untuk ketinggian baris proporsional
Teks responsif: Sesuaikan saiz fon merentasi titik putus sambil mengekalkan proporsi

1/* Sistem tipografi menggunakan unit REM */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

Reka Bentuk Piksel-Pasti

Apabila melaksanakan reka bentuk dari alat seperti Figma atau Photoshop:

Pemindahan reka bentuk: Tukar nilai piksel dari fail reka bentuk kepada REM/EM untuk pembangunan
Menjaga ketepatan: Pastikan jarak dan saiz yang tepat semasa menggunakan unit relatif
Integrasi sistem reka bentuk: Terjemahkan token reka bentuk berasaskan piksel kepada unit relatif

Unit CSS Alternatif

Walaupun PX, REM, dan EM adalah unit yang paling biasa, terdapat alternatif yang patut dipertimbangkan:

Unit Viewport (VW, VH)

VW (lebar viewport): 1vw sama dengan 1% daripada lebar viewport
VH (tinggi viewport): 1vh sama dengan 1% daripada tinggi viewport
Kes penggunaan: Mencipta elemen yang berskala secara langsung dengan saiz viewport

Peratusan (%)

Relatif kepada dimensi elemen induk
Kes penggunaan: Susun atur cecair dan lebar responsif

Unit CH

Berdasarkan lebar aksara "0"
Kes penggunaan: Mencipta bekas dengan bilangan aksara tertentu setiap baris

Unit EX

Berdasarkan ketinggian aksara huruf kecil "x"
Kes penggunaan: Menyempurnakan tipografi, terutamanya untuk penyesuaian ketinggian x

Evolusi Unit CSS dalam Pembangunan Web

Sejarah unit CSS mencerminkan evolusi yang lebih luas dalam reka bentuk web, dari susun atur statik kepada pendekatan responsif dan boleh diakses hari ini.

Reka Bentuk Web Awal (1990-an)

Pada awal zaman CSS, piksel adalah raja. Pereka web mencipta susun atur lebar tetap, biasanya 640px atau 800px lebar untuk menampung resolusi skrin yang biasa. Aksesibiliti dan kepelbagaian peranti bukanlah kebimbangan utama, dan kawalan piksel yang tepat adalah matlamat utama.

Kebangkitan Susun Atur Cecair (Awal 2000-an)

Dengan kepelbagaian saiz skrin, susun atur berasaskan peratusan mula mendapat populariti. Pereka mula mencipta reka bentuk yang lebih fleksibel, walaupun tipografi sering kekal dalam unit piksel. Era ini menyaksikan pengenalan unit EM dalam CSS, walaupun penerimaannya terhad disebabkan oleh kompleksiti pengurusan saiz fon yang cascading.

Revolusi Mudah Alih (2007-2010)

Pengenalan iPhone pada tahun 2007 mengubah reka bentuk web. Tiba-tiba, laman web perlu berfungsi pada skrin sekecil 320px lebar. Ini memacu minat dalam teknik reka bentuk responsif dan unit relatif. Keterbatasan unit EM (terutamanya kesan cascading) menjadi lebih ketara apabila reka bentuk menjadi lebih kompleks.

Era Reka Bentuk Web Responsif (2010-2015)

Artikel berpengaruh Ethan Marcotte tentang reka bentuk web responsif pada tahun 2010 mengubah cara pemaju mendekati unit CSS. Unit REM diperkenalkan dalam CSS3, menawarkan manfaat skala relatif tanpa komplikasi cascading unit EM. Sokongan pelayar untuk unit REM berkembang dengan pesat dalam tempoh ini.

Pendekatan CSS Moden (2015-Sekarang)

Pembangunan web hari ini menerima campuran unit untuk tujuan yang berbeza:

Unit REM untuk konsistensi global dan aksesibiliti
Unit EM untuk penskalaan berasaskan komponen
Piksel untuk batas dan butiran kecil
Unit viewport untuk elemen yang benar-benar responsif
Fungsi CSS calc() untuk menggabungkan pelbagai jenis unit

Evolusi ini mencerminkan peralihan web dari medium berasaskan dokumen kepada platform aplikasi yang kompleks yang mesti berfungsi merentasi pelbagai peranti dan konteks.

Contoh Kod untuk Penukaran Unit

Fungsi Penukar Unit JavaScript

1// Tukar antara unit PX, REM, dan EM
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// Contoh penggunaan
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

Harta Kustom CSS untuk Penukaran Unit

1:root {
2  /* Saiz fon asas */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Nilai piksel biasa ditukar kepada 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  /* Skala tipografi */
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/* Contoh penggunaan */
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

Mixin SCSS untuk Penukaran Unit

1// Fungsi SCSS untuk penukaran unit
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// Contoh penggunaan
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    // Menggunakan saiz fon induk (18px) untuk penukaran em
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Penukar Unit Python

1def px_to_rem(px, root_font_size=16):
2    """Tukar piksel kepada unit REM"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Tukar unit REM kepada piksel"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Tukar piksel kepada unit EM"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Tukar unit EM kepada piksel"""
15    return em * parent_font_size
16
17# Contoh penggunaan
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

Soalan Lazim

Apa perbezaan antara unit REM dan EM?

Unit REM (root em) adalah relatif kepada saiz fon elemen akar (biasanya elemen <html>), manakala unit EM adalah relatif kepada saiz fon elemen induknya. Perbezaan utama ini bermakna unit REM mengekalkan saiz yang konsisten di seluruh dokumen tanpa mengira sarang, manakala unit EM boleh mencipta kesan kompaun apabila elemen bersarang.

Unit CSS manakah yang terbaik untuk reka bentuk responsif?

Tiada satu unit "terbaik" untuk semua situasi. Campuran unit biasanya paling berkesan:

Unit REM untuk tipografi dan jarak yang konsisten
Unit EM untuk penskalaan khusus komponen
Peratusan atau unit viewport untuk lebar susun atur
Piksel untuk batas dan butiran kecil

Pendekatan ideal adalah menggunakan setiap unit untuk apa yang dilakukannya yang terbaik dalam sistem yang kohesif.

Mengapa pelayar secara lalai menetapkan saiz fon kepada 16px?

Saiz lalai 16px ditetapkan sebagai standard kebolehbaca yang berfungsi dengan baik di seluruh peranti. Penyelidikan menunjukkan bahawa teks sekitar 16px adalah optimum untuk dibaca pada skrin pada jarak pandangan biasa. Lalai ini juga memberikan asas yang baik untuk aksesibiliti, memastikan teks tidak terlalu kecil untuk kebanyakan pengguna.

Bolehkah saya menggunakan nilai negatif dengan unit-unit ini?

Ya, CSS menyokong nilai negatif untuk banyak sifat menggunakan mana-mana jenis unit. Margin negatif, terjemahan, dan kedudukan adalah kes penggunaan biasa untuk nilai negatif. Penukar kami mengendalikan nilai negatif dengan betul untuk semua jenis unit.

Bagaimana unit EM berfungsi dengan elemen bersarang?

Unit EM akan bertambah apabila elemen bersarang. Sebagai contoh:

1.parent {
2  font-size: 16px;
3}
4.child {
5  font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8  font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10

Kesan kompaun ini boleh berguna untuk mencipta reka bentuk proporsional tetapi memerlukan pengurusan yang teliti untuk mengelakkan penskalaan yang tidak diingini.

Bagaimana saya menangani skrin DPI tinggi (Retina) dengan unit CSS?

Skrin DPI tinggi ditangani secara automatik apabila menggunakan unit relatif seperti REM dan EM. Oleh kerana unit-unit ini berdasarkan saiz fon dan bukannya piksel fizikal, mereka berskala dengan sewajarnya pada skrin resolusi tinggi. Untuk gambar dan batas, pertimbangkan untuk menggunakan kueri media dengan nisbah piksel peranti atau resolusi.

Haruskah saya menggunakan REM atau EM untuk kueri media?

Sokongan pelayar untuk unit REM dan EM dalam kueri media telah meningkat dengan ketara. Menggunakan unit EM dalam kueri media biasanya disyorkan kerana:

Ia relatif kepada saiz fon lalai pelayar
Ia menghormati pilihan saiz fon pengguna
Ia memberikan titik putus yang konsisten di seluruh pelayar

1/* Menggunakan unit EM untuk kueri media */
2@media (min-width: 48em) {  /* 768px dengan asas 16px */
3  /* Gaya tablet */
4}
5
6@media (min-width: 64em) {  /* 1024px dengan asas 16px */
7  /* Gaya desktop */
8}
9

Bagaimana saya menukar antara unit dalam alat reka bentuk seperti Figma atau Sketch?

Kebanyakan alat reka bentuk berfungsi terutamanya dengan piksel. Apabila melaksanakan reka bentuk:

Catat saiz fon akar projek anda (biasanya 16px)
Bahagikan nilai piksel dengan saiz fon akar untuk mendapatkan nilai REM
Untuk nilai EM, bahagikan dengan saiz fon elemen induk
Pertimbangkan untuk mencipta token reka bentuk atau pembolehubah untuk nilai biasa

Sesetengah alat reka bentuk mempunyai pemalam yang boleh membantu proses penukaran ini secara automatik.

Bagaimana pelayar mengendalikan rendering subpiksel dengan unit relatif?

Pelayar mengendalikan nilai subpiksel dengan cara yang berbeza. Sesetengah pelayar membundarkan kepada piksel terdekat, manakala yang lain menyokong rendering subpiksel untuk penskalaan yang lebih lancar. Ini kadang-kadang boleh menyebabkan sedikit ketidakkonsistenan di seluruh pelayar, terutamanya dengan nilai REM/EM yang kecil atau apabila menggunakan transformasi. Untuk kebanyakan kes penggunaan, perbezaan ini adalah tidak ketara.

Apakah kesan prestasi menggunakan pelbagai unit CSS?

Tiada perbezaan prestasi yang ketara antara menggunakan piksel, REM, atau EM dalam pelayar moden. Pilihan unit harus berdasarkan keperluan reka bentuk, tingkah laku responsif, dan keperluan aksesibiliti dan bukannya pertimbangan prestasi.

Rujukan dan Bacaan Lanjut

"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Cuba Penukar Unit Kami Hari Ini

Hentikan perjuangan dengan penukaran unit CSS manual dan biarkan Penukar Unit PX, REM, dan EM kami melakukan kerja untuk anda. Sama ada anda membina laman web responsif, mencipta sistem reka bentuk, atau hanya belajar tentang unit CSS, alat ini akan menjimatkan masa anda dan memastikan ketepatan. Masukkan nilai anda sekarang untuk melihat betapa mudahnya penukaran unit!

Penukar PX ke REM ke EM: Kalkulator Unit CSS

Penukar Unit PX, REM, dan EM

Formula Penukaran

Dokumentasi