Konversi piksel (px) ke rem
24 px sama dengan 1,5 rem pada ukuran font dasar bawaan 16 px, dan 14 px sama dengan 0,875 rem. Rumusnya satu pembagian: ukuran piksel dibagi ukuran font dasar. Masukkan ukuran dari desain di kolom pertama, dan jika halaman Anda memakai dasar lain, tulis angkanya di kolom font-size dasar.
Apa itu rem, dan mengapa ukuran piksel ditulis dalam rem?
File desain memberi ukuran dalam piksel: judul 28 px, jarak antarbagian 32 px. Piksel di CSS adalah satuan tetap, yang oleh standar CSS didefinisikan sebagai 1/96 inci[1]. Karena itu konverter px ke inci menghitung 96 piksel dalam satu inci pada resolusi bawaannya. rem adalah satuan relatif, dan satu rem sama dengan ukuran font yang dihitung pada elemen html, yaitu elemen root halaman[1].
Karena rem selalu dihitung dari elemen root, nilainya tidak menumpuk seperti em di dalam elemen bersarang. Anda cukup mengetahui ukuran font elemen html untuk mengubah ukuran piksel apa pun ke rem. Setelah itu ukurannya mengikuti pengaturan pembaca: judul 24 px tetap 24 px pada pengaturan bawaan, dan menjadi 30 px bagi pembaca yang memilih Besar di Chrome atau Ukuran font Besar di Edge.
60px pada aturan .hero, dan 220px pada aturan yang menggabungkan .heading dan .sub-heading. Pada dasar 16 px, yang pertama menjadi 3.75rem dan yang kedua 13.75rem, lalu keduanya ikut membesar sesuai pengaturan pembaca. Foto: Ferenc Almasi, Unsplash.24 px berapa rem?
24 px sama dengan 1,5 rem pada ukuran font dasar bawaan 16 px. Rumusnya satu pembagian: rem = px ÷ ukuran font dasar. Setiap 16 px sama dengan 1 rem, dan satu piksel sama dengan 0,0625 rem. Dari sini, ukuran 8 px sama dengan 0,5 rem. Ukuran 32 px sama dengan 2 rem.
Jika stylesheet memakai dasar lain, bagilah dengan dasar itu. Dengan teknik 62,5% dasarnya menjadi 10 px, sehingga 24 px sama dengan 2,4 rem. Dengan dasar 20 px, 24 px sama dengan 1,2 rem. Tulis dasarnya di kolom ketiga, dan konverter memberi nilai yang tinggal ditulis di stylesheet.
Sebagian ukuran tidak habis dibagi 16, karena itu hasil ditampilkan dengan paling banyak empat angka desimal. Ukuran 13 px, misalnya, sama dengan 0,8125 rem, dan CSS menerima angka itu apa adanya. Kolom hasil menampilkan koma, sedangkan tombol “Salin hasil” menyalin 0.8125 dengan titik, jadi angkanya bisa langsung ditempel dan diberi kata rem di belakangnya.
Bagaimana rumus mengubah px ke rem?
Rumusnya rem = px ÷ font-size, dengan font-size adalah ukuran font elemen html. Ambil judul berukuran 28 px dari desain. Pada dasar 16 px hasilnya 28 ÷ 16 = 1,75, jadi di stylesheet Anda menulis font-size: 1.75rem.
Ukuran yang habis dibagi 4 memberi nilai dengan paling banyak dua angka desimal, misalnya 12 px yang sama dengan 0,75 rem. Ukuran genap lainnya memberi tiga angka desimal, seperti 14 px yang sama dengan 0,875 rem, dan ukuran ganjil memberi empat, seperti 15 px yang sama dengan 0,9375 rem. Ukuran seperti 13,5 px menghasilkan angka desimal kelima, jadi hasilnya dibulatkan menjadi empat angka desimal: 0,8438 rem.
Untuk arah sebaliknya, gunakan konverter rem ke px. Jika Anda butuh nilai relatif terhadap ukuran font elemen induk, ubah ukurannya di konverter px ke em. Jika ukuran di file tertulis dalam poin (pt), ubah dulu ke piksel di konverter pt ke px.
font-size:13px menjadi 0.8125rem. Lalu margin:16px 0 20px menjadi 1rem 0 1.25rem. Foto: Rahul Mishra, Unsplash.Tabel konversi px ke rem pada tiga ukuran dasar
| Ukuran piksel | rem pada dasar 16 px | rem pada dasar 10 px | rem pada dasar 20 px |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 11 px | 0,6875 rem | 1,1 rem | 0,55 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 13 px | 0,8125 rem | 1,3 rem | 0,65 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 15 px | 0,9375 rem | 1,5 rem | 0,75 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 17 px | 1,0625 rem | 1,7 rem | 0,85 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 25 px | 1,5625 rem | 2,5 rem | 1,25 rem |
| 26 px | 1,625 rem | 2,6 rem | 1,3 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 50 px | 3,125 rem | 5 rem | 2,5 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 100 px | 6,25 rem | 10 rem | 5 rem |
| 120 px | 7,5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 200 px | 12,5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
Bagaimana contoh baris stylesheet ditulis dalam rem?
| Baris dalam piksel | rem pada dasar 16 px | rem pada dasar 10 px (62,5%) |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
@media (min-width: 48rem) mulai berlaku pada lebar 768 px. Setelah ukuran font browser kami naikkan ke 20 px, aturan itu mulai berlaku pada lebar 960 px.Penulisan apa saja yang diterima dan dihitung konverter px ke rem?
| Yang Anda ketik atau tempel | Hasil hitungan konverter | Apa yang terjadi dengan penulisan ini |
|---|---|---|
| Kolom pertama: ukuran piksel, dengan dasar 16 px | ||
| 24 | 1,5 rem | Angka saja, seperti ukuran yang tampil di panel pengukuran aplikasi desain. |
| 24px | 1,5 rem | Ukuran dengan satuan yang menempel: kami baca angkanya dan mengabaikan px. |
| 24 px | 1,5 rem | Satuan dipisah spasi, seperti dalam teks: hasilnya sama. |
| 13,5 | 0,8438 rem | Ukuran pecahan dengan koma: hasilnya tampil dengan empat angka desimal setelah pembulatan. |
| 1 200 | 75 rem | Spasi di antara ribuan kami lewati, jadi ukurannya seribu dua ratus piksel. Meskipun EYD memakai titik untuk ribuan, “1.200” dengan titik dibaca kolom sebagai 1,2, dan di bawah kolom muncul petunjuk untuk mengetik 1200. |
| 1,200 | 0,075 rem | Koma di halaman ini kami baca sebagai desimal, walaupun diikuti tiga angka, jadi ukurannya 1,2 piksel, dan di bawah kolom muncul petunjuk. Untuk seribu dua ratus, tulis 1200 atau 1 200. |
| 1200px | 75 rem | Lebar wadah dengan satuan, tanpa pemisah ribuan: sama dengan 75 rem. |
| padding: 20px; | 1,25 rem | Satu baris utuh dari stylesheet: kami ambil angkanya dan mengabaikan nama properti serta titik koma. |
| −8px | -0,5 rem | Tanda minus tipografis “−” di depan angka kami baca sebagai tanda negatif, seperti pada margin negatif. |
| Kolom “font-size dasar”: yang dihitung adalah ukuran dasarnya | ||
| 62,5% | 10 px | Persentase seperti yang Anda tulis untuk elemen html: 62,5% dari dasar bawaan 16 px adalah 10. |
| font-size: 18px | 18 px | Baris yang disalin dari stylesheet: angka 18 kami ambil sebagai dasar. |
Bagaimana mengubah ukuran dari Figma atau seluruh stylesheet dari px ke rem?
Konverter cukup untuk beberapa ukuran. Jika ukurannya banyak, aplikasi desain dan alat build bisa menghitung rem sendiri.
Ukuran dari file desain
Salin ukuran piksel dari panel pengukuran, lalu tempel di kolom pertama. Jika halaman mengatur ukuran font untuk elemen html, tulis angkanya di kolom font-size dasar sebelum Anda menyalin hasilnya.Dev Mode di Figma
Pada paket berbayar, Dev Mode menampilkan ukuran langsung dalam rem. Nama di sini dalam bahasa Inggris, sesuai tampilan Figma. Di bagian Code pada panel Inspect, klik Inspect settings di samping menu bahasa, lalu pilih satuan rem. Untuk mengubah dasarnya, pilih Set unit scale… di tempat yang sama, lalu isi dasarnya di jendela Unit scale.Fungsi di Sass
Sass membagi angka dengan fungsimath.div()dari modulsass:math[3]. Fungsi@function rem($px) { @return math.div($px, 16px) * 1rem; }membuatrem(24px)bernilai1.5rem.PostCSS untuk seluruh stylesheet
Plugin postcss-pxtorem mengubah px ke rem di file CSS saat proses build[4]. Dasar bawaannya 16, dan dengan pengaturan bawaan plugin ini hanya mengubah properti huruf: font, font-size, line-height, dan letter-spacing. Media query tetap dalam piksel.
Konversi Piksel ke satuan lain
Sumber
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> CSS type — MDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
Semua nilai dalam tabel kami hitung dari definisi satuan dan kami periksa ulang dengan perhitungan sebelum diterbitkan. Data sejarah dan nama satuan lokal kami dasarkan pada sumber yang disebutkan di atas.
Pembaruan konten terakhir: · ditulis dan diperiksa oleh tim Arteon
Pertanyaan umum tentang konversi px ke rem
16 px berapa rem?
16 px sama dengan 1 rem pada dasar bawaan 16 px. Dengan teknik 62,5%, yaitu pada dasar 10 px, hasilnya 1,6 rem.
14 px dan 12 px berapa rem?
14 px sama dengan 0,875 rem pada dasar 16 px, dan 12 px sama dengan 0,75 rem.
Apakah 24 px selalu sama dengan 1,5 rem?
Itu hanya berlaku pada dasar 16 px. Jika halaman menulis ukuran lain untuk elemen html, bagilah dengan ukuran itu: pada dasar 10 px hasilnya 2,4 rem, dan pada dasar 20 px hasilnya 1,2 rem.
Mengapa dibagi 16?
Karena 16 px adalah ukuran font bawaan yang umum di browser, dan pengguna bisa mengubahnya sendiri[5]. Dalam pengukuran kami, ukuran itulah yang dipakai Chrome, Edge, dan Firefox sebelum pengaturannya diubah.
Apakah teknik 62,5% mengubah nilai rem di media query?
Tidak. Aturan @media (min-width: 48rem) mulai berlaku pada 768 px, dengan atau tanpa teknik itu, karena rem di dalam media query dihitung dari nilai awal ukuran font[2]. Karena itu ubahlah batas media query dengan membaginya dengan 16.
Apa bedanya mengubah px ke rem dan ke em?
rem dihitung dari ukuran font elemen html, jadi Anda membagi dengan dasar yang sama di seluruh halaman. em dihitung dari ukuran font elemen induk, jadi Anda membagi dengan ukuran font induk. Untuk perhitungan itu ada konverter px ke em.
Apakah garis tepi 1px perlu ditulis dalam rem?
Jika garis tepi harus tetap setebal satu piksel pada setiap pengaturan, biarkan 1px. Jika ditulis 0.0625rem, tebalnya menjadi 1,25 px bagi pembaca yang memilih dasar 20. Plugin postcss-pxtorem juga membiarkan properti border dalam piksel pada pengaturan bawaannya[4].
Apakah teks dalam rem ikut membesar sesuai pengaturan pembaca?
Ya. Teks dalam rem membesar mengikuti ukuran font yang dipilih pembaca di browser, sedangkan teks dalam piksel tetap. Kriteria 1.4.4 Resize Text dalam WCAG membahas hal ini: teks dapat diperbesar sampai 200 persen tanpa kehilangan isi atau fungsi[6].
Bantu kami menyempurnakan alat ini
Menemukan ukuran yang memberi nilai berbeda di browser Anda, atau punya ide untuk konverter ini? Tulis ke kami.