Konversi px ke rem Pixels ↔ Root em Gratis Daring Aman
Ketik sebuah nilai dalam px dan bacalah langsung dalam rem. Hitungannya terjadi di peramban Anda, tidak ada yang dikirim ke mana pun, dan apa yang menentukan hasilnya tertulis di bawah, bukan diandaikan.
Tidak ada unggahan
Ukuran yang lazim — Konversi px ke rem
| px | rem |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
Dari mana satuan ini berasal
Piksel pada CSS bukanlah piksel pada layar Anda. Ketika layar tak lagi punya kerapatan yang bisa diramalkan, halaman yang diukur dengan piksel sungguhan menjadi halaman yang menyusut seiring layar makin tajam; maka piksel CSS ditetapkan ulang sebagai panjang acuan: sekitar 1/96 inci, dilihat dari jarak baca yang nyaman. Semua yang lain di halaman ini berdiri di atasnya. Em lebih tua daripada web — pada huruf timah ia adalah lebar sebuah balok cetak, dinamai menurut huruf M besar — dan pada CSS ia berarti ukuran huruf yang sedang berlaku, karena itu ia berubah ketika Anda menyarangkan elemen. Rem ditambahkan justru untuk lolos dari hal itu: ia em milik elemen akar dan tak pernah bertumpuk. Vw datang bersama rancangan tanggap: seperseratus lebar jendela, berapa pun lebarnya.
Di mana Anda menemuinya
Inilah satuan tiap lembar gaya. Piksel menentukan tepi, bayangan, dan segala yang tak boleh ikut berskala; rem menentukan huruf, jarak, dan tata letak, sehingga satu perubahan di akar mengubah ukuran seluruh antarmuka; em menentukan hal-hal yang harus mengikuti teksnya sendiri, seperti ganjal di dalam tombol; vw menentukan judul dan bagian pembuka yang mesti memenuhi layar pada peranti apa pun. Mengubah di antara keduanya adalah hitungan sehari-hari untuk menjadikan rancangan yang diserahkan dalam piksel sebagai lembar gaya yang ikut berskala.
Pertanyaan yang sering diajukan
Mengapa 16 px menjadi titik tolak yang lazim?
Karena itulah ukuran teks bawaan pada semua peramban besar, dan lembar gaya yang tak menimpanya akan mewarisinya. Jadi satu rem sama dengan 16 px pada setelan bawaan, dan dari sanalah datangnya konversi yang akrab: 0,5 rem adalah 8 px, 1,5 rem adalah 24 px. Bila pengguna memperbesar nilai bawaan itu pada setelan peramban, nilai rem yang sama ikut membesar — dan justru itulah gunanya memakainya.
Sebaiknya memakai rem atau em?
Rem untuk segala yang harus mengikuti halaman secara keseluruhan — tangga ukuran huruf, jarak, lebar tata letak — sebab ia diukur dari akar dan tak pernah menumpuk. Em untuk segala yang harus mengikuti teks tempatnya berada: ganjal sebuah tombol, sela di samping ikon, inden sebuah kutipan. Kekeliruan yang lazim ialah menyarangkan elemen berukuran em satu di dalam yang lain: 1,2 em di dalam 1,2 em menjadi 1,44, lalu 1,73, sampai teks di bawah halaman berukuran dua kali lipat dari yang dimaksudkan.
Apakah hasilnya tepat?
Bila kedua satuan saling didefinisikan dengan bilangan bulat, ya — halaman menyatakannya di atas angka, dan pembulatan hanya ada pada berapa digit yang ditampilkan. Bila rasionya tidak berujung sebagai desimal, halaman menampilkan dua belas angka penting dan menyebut hubungannya hampiran, bukan berpura-pura sebaliknya.
Apakah yang saya ketik meninggalkan perangkat saya?
Tidak. Perhitungan berjalan di peramban Anda; tidak ada yang diunggah, dan memang tidak ada server untuk menerimanya. Sekali dimuat, halaman tetap bekerja meski jaringan dimatikan.
Mengapa desainer dan pengembang konversi px ke rem
Alat desain berbicara dalam piksel. Mockup menyatakan judul 32 px, celah antarbagian 48 px, tombol punya padding 16 px. Lembar gaya, bila ditulis dengan baik, berbicara dalam rem. Jurang antara kedua bahasa itulah tempat halaman ini berada: Anda mengetik ukuran dalam piksel dan membacanya dalam rem, agar angka yang Anda taruh di CSS bermakna seperti yang dimaksud desainer. Konversi px ke rem adalah tindakan kecil, tetapi dilakukan ratusan kali dalam hidup sebuah situs web, dan basis yang salah mengubah tata letak yang cermat menjadi sedikit salah di mana-mana sekaligus.
Alasan untuk repot dengan rem sama sekali adalah aksesibilitas dan keluwesan. Rem adalah kelipatan ukuran font akar, yang diatur browser pada 16 px kecuali diberi tahu lain, dan yang bebas diubah pembaca dalam pengaturannya. Tata letak yang ditulis dalam rem karena itu mempertahankan bentuknya ketika seseorang berpenglihatan lemah menaikkan ukuran teks bawaan: huruf, jarak, dan kotak tumbuh bersama. Tata letak yang ditulis dalam piksel tidak mengikuti, dan pembaca yang meminta teks lebih besar mendapat huruf lebih besar dalam kotak yang sesak, atau tidak sama sekali. Itulah sebabnya hampir setiap panduan gaya modern mengatakan hal yang sama: pakai rem untuk huruf dan jarak.
Halaman ini mengerjakan aritmetika di browser Anda. Tidak ada yang diunggah, dan apa yang menjadi sandaran konversi, ukuran basis, dituliskan di bawah dan berada di kolom yang dapat Anda ubah, alih-alih diasumsikan di belakang punggung Anda. Di bawah Anda akan menemukan rumusnya, tabel ukuran umum, alasan basis penting, jebakan yang menangkap orang yang konversi px ke rem dengan tergesa, dan panduan singkat memakai hasilnya dalam lembar gaya sungguhan.
Rumus dan basis
rem sama dengan px dibagi basis
Rumusnya satu pembagian: rem = px ÷ basis. Dengan basis lazim 16 px, ukuran 24 px menjadi 1,5 rem, 32 px menjadi 2 rem, dan 8 px menjadi 0,5 rem. Halaman menunjukkan hasilnya saat Anda mengetik, dan menunjukkan basis yang dipakainya, jadi baris 24 px = 1,5 rem (16 px) memberi tahu persis apa yang diasumsikan.
Dari mana angka 16 berasal
Basis mulai pada 16 px karena itulah yang dipakai browser ketika tak seorang pun menyatakan lain. Ia bukan hukum web; ia bawaan dari bawaan, dan telah stabil selama puluhan tahun. Jika CSS Anda tak pernah menyentuh ukuran font akar, 1 rem adalah 16 px bagi sebagian besar pengunjung. Jika ya, basisnya apa pun yang Anda atur.
Trik 62,5% dan mengapa orang memakainya
Sebagian lembar gaya mengatur ukuran akar ke 62,5%, yang membuat 1 rem sama dengan 10 px pada browser bawaan, sehingga 24 px sekadar 2,4 rem dan aritmetika mudah dilakukan di kepala. Ia berhasil, tetapi punya biaya: seluruh halaman kini bergantung pada persentase itu, dan komponen mana pun yang mengharapkan 16 sebagai basis akan keluar terlalu kecil. Jika proyek Anda melakukan ini, ketik 10 di kolom basis halaman ini, dan setiap angka akan cocok dengan CSS Anda.
Apa yang dipertahankan konversi dan apa yang tidak bisa
Ia mempertahankan proporsi
Satu rem adalah apa pun ukuran font akarnya, jadi tata letak yang ditulis dalam rem mempertahankan bentuknya ketika ukuran itu berubah. Itulah seluruh alasan menulisnya demikian. Ketika Anda konversi px ke rem, angka yang Anda dapat adalah proporsi yang sama yang dimiliki nilai piksel pada basis yang Anda pilih, kini dinyatakan dengan cara yang dapat diskalakan.
Ia tak dapat mengetahui pengaturan pembaca Anda
Angka bergantung sepenuhnya pada basis. Jika CSS Anda mengatur ukuran berbeda pada elemen akar, atau pembaca telah mengubah ukuran teks bawaan di browser mereka, yang dilakukan banyak orang dan berhak mereka lakukan, maka 1 rem bukan 16 px bagi mereka. Angka pada halaman benar hanya untuk basis di kolom. Ini bukan cacat alat melainkan sifat satuan: ia relatif, dan satuan relatif tak punya nilai tetap untuk dikonversi.
Pembulatan
Pembagian dengan 16 memberi hasil bersih untuk banyak ukuran umum (16, 24, 32, 48, 64) dan desimal berulang untuk yang lain (10 px adalah 0,625 rem; 13 px adalah 0,8125). Halaman memberi sebanyak digit yang diperlukan angka, dan Anda memutuskan berapa banyak yang disimpan dalam lembar gaya. Browser menangani desimal panjang tanpa masalah, tetapi nilai yang dibulatkan seperti 0,8125rem lebih mudah dibaca dan dipelihara daripada yang berdigit sepuluh.
Ukuran umum
Tabel di kaki halaman
Di bawah konverter Anda menemukan tabel ukuran umum: 8 px adalah 0,5 rem, 10 px adalah 0,625, 12 px adalah 0,75, 14 px adalah 0,875, 16 px adalah 1, 18 px adalah 1,125, 20 px adalah 1,25, 24 px adalah 1,5, 32 px adalah 2, 48 px adalah 3, dan 64 px adalah 4. Ini ukuran yang paling sering muncul dalam skala huruf dan sistem jarak, dan memilikinya di depan Anda menghemat satu konversi.
Skala yang dibangun di atas rem
Kebiasaan yang berguna adalah memilih sekumpulan kecil nilai rem dan memakainya ulang: 0,5; 1; 1,5; 2; 3 dan 4 untuk jarak, dan 0,875; 1; 1,25; 1,5; 2 untuk huruf. Desainer menyebut ini skala, dan ia menjaga situs konsisten secara visual. Ketika mockup memberi Anda nilai ganjil seperti 22 px, pakai konverter untuk melihat bahwa itu 1,375 rem, lalu putuskan apakah akan dibulatkan ke nilai terdekat pada skala Anda.
Cara konversi px ke rem di sini
Ketik nilai piksel
Masukkan ukuran dalam piksel di kolom pertama. Desimal diterima, jadi 13,5 px bekerja sama baiknya dengan 14.
Periksa basisnya
Biarkan pada 16 jika CSS Anda tak mengubah ukuran akar. Ubah jika ya. Hasilnya diperbarui saat Anda mengetik.
Salin nilai rem
Baca angkanya dan pakai dalam CSS Anda, dengan satuan ditulis di belakangnya: font-size: 1.5rem. Jangan lupa satuannya, karena angka tanpa satuan berarti hal lain pada sebagian besar properti.
Dari mana satuan ini berasal
Piksel CSS bukan piksel layar Anda
Ketika layar berhenti punya kepadatan yang dapat diprediksi, halaman yang diukur dalam piksel nyata menjadi halaman yang menyusut seiring layar makin tajam. Jadi piksel CSS didefinisikan ulang sebagai panjang acuan: sekitar 1/96 inci yang dilihat pada jarak baca yang nyaman. Segala yang lain di halaman ini dibangun di atasnya. Em lebih tua daripada web: dalam huruf logam ia adalah lebar balok cor, dinamai menurut huruf kapital M, dan dalam CSS ia berarti ukuran font yang berlaku, itulah sebabnya ia berubah saat Anda menyarangkan elemen. Rem ditambahkan untuk lepas dari persis itu: ia adalah em dari elemen akar dan tak pernah berlipat.
Mengapa rem ada
Sebelum rem, pengembang mengukur segalanya dalam em atau persentase, dan elemen bersarang saling melipatgandakan: daftar di dalam daftar di dalam daftar menyusut atau membesar pada setiap tingkat. Rem memberi mereka satu acuan tetap, akar, dan menghapus pelipatan. Jika Anda ingin membandingkan keduanya, konversi px ke em dan lihat bagaimana nilai piksel yang sama bergantung pada elemen tempatnya berada.
Di mana Anda bertemu rem dalam praktik
Huruf
Teks isi lazim 1 rem, judul 1,25 hingga 3 rem, cetakan kecil 0,75 hingga 0,875 rem. Menuliskannya dalam rem memungkinkan pembaca memperbesar seluruh halaman dengan mengubah satu pengaturan browser.
Jarak dan tata letak
Margin, padding, dan celah dalam rem menjaga ruang kosong proporsional dengan huruf. Ketika teks tumbuh, ruang di sekitarnya tumbuh juga, dan tata letak tetap seimbang alih-alih menjejalkan huruf lebih besar ke dalam kotak lama.
Media query
Titik henti yang ditulis dalam em atau rem menanggapi ukuran teks pembaca, jadi tata letak beralih ke bentuk sempitnya lebih awal bagi orang yang telah memperbesar teksnya. Itu penyempurnaan yang layak diketahui, meski piksel tetap lazim pada titik henti.
Apa yang dibiarkan dalam piksel
Batas setipis rambut, bayangan kotak, dan ikon tipis sering tampak terbaik pada ukuran piksel tetap, karena batas 0,0625rem yang tumbuh menjadi 0,1rem dengan teks besar tidak membantu siapa pun. Pakai rem untuk yang harus diskalakan dan piksel untuk yang tidak.
Jebakan saat Anda konversi px ke rem
Lupa bahwa basis tak selalu 16
Jika proyek mengatur html { font-size: 62.5% }, atau memakai ukuran akar cair, faktornya berbeda. Periksa lembar gaya sebelum Anda memercayai angka dari konverter mana pun, termasuk yang ini.
Mengonversi ukuran akar itu sendiri
Jika Anda mengatur ukuran akar dalam piksel, pengaturan browser pembaca ditimpa dan manfaat rem hilang. Atur akar sebagai persentase, atau biarkan saja, agar preferensi pengguna dihormati.
Memakai rem di dalam komponen yang mengatur ukuran fontnya sendiri
Rem selalu merujuk pada akar, bukan komponen. Tombol dengan ukuran font 14 px dan padding 1rem punya padding yang tidak mengikuti teks tombol itu sendiri. Jika Anda menginginkan jarak yang mengikuti teks elemen, itu tugas em.
Mencampur satuan tanpa rencana
Lembar gaya yang memakai px untuk satu margin, rem untuk berikutnya, dan em untuk yang ketiga sulit dinalar. Pilih aturan: rem untuk huruf dan jarak, piksel untuk batas dan bayangan, dan patuhi.
Pertanyaan yang diajukan orang sebelum mengonversi
Berapa rem 16 px?
Satu, pada browser bawaan. Enam belas dibagi basis enam belas.
Apakah rem lebih baik daripada px?
Untuk huruf dan jarak, ia pilihan yang lebih baik pada sebagian besar proyek, karena menghormati pengaturan pembaca. Piksel tetap tepat untuk hal yang tidak boleh diskalakan.
Mengapa hasil saya berbeda dari situs lain?
Mungkin basis berbeda. Periksa kolomnya: sebagian alat mengasumsikan 10, sebagian 16, sebagian 14. Halaman ini menunjukkan basis di samping hasil.
Haruskah saya membulatkan?
Tidak. Browser menerima desimal panjang. Bulatkan hanya demi keterbacaan.
Apakah angka saya diunggah?
Tidak. Aritmetika berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan rem ke px, yang mengalikan alih-alih membagi.
Memilih dengan bijak saat konversi px ke rem
Putuskan basis untuk proyek dan patuhi
Apa pun pilihan Anda, jadikan keputusan dan tuliskan dalam dokumentasi proyek. Tim yang tak sepakat soal basis menghasilkan komponen yang tidak saling cocok.
Konversi pada tahap desain, bukan saat-saat terakhir
Jika Anda konversi px ke rem sambil membaca mockup, Anda membangun skala ke dalam desain dan memperhatikan nilai ganjil lebih awal. Jika Anda melakukannya di akhir, Anda menemukannya sebagai tumpukan angka tak konsisten.
Pertimbangkan juga satuan viewport
Untuk judul yang harus memenuhi layar, px ke vw menyatakan ukuran sebagai bagian dari viewport. Ia menskalakan secara berbeda dari rem, dan keduanya sering digabungkan.
Kebiasaan yang memudahkan konversi px ke rem
Simpan tabel konversi di kepala Anda
Dengan basis 16, beberapa jangkar mencakup sebagian besar pekerjaan: 4 px adalah 0,25 rem, 8 px adalah 0,5, 12 px adalah 0,75, 16 px adalah 1, 24 px adalah 1,5, dan 32 px adalah 2. Ketika mockup memberi Anda nilai di antaranya, Anda dapat memperkirakan sebelum Anda konversi px ke rem pada halaman, dan memakai konverter hanya untuk memastikan. Setelah beberapa pekan Anda akan tahu tabelnya tanpa melihat.
Biarkan sistem desain bekerja
Jika tim Anda menyimpan token desain, seperti spacing-2 atau font-lg, simpan dalam rem sekali, dan biarkan semua orang merujuk pada namanya. Maka tak seorang pun perlu konversi px ke rem lagi, dan perubahan pada skala dibuat di satu tempat. Konverter adalah alat yang Anda pakai saat menulis token, bukan saat memakainya.
Tulis nilai piksel dalam komentar
Baris seperti padding: 1.25rem; /* 20px */ memakan beberapa karakter dan menyelamatkan pengembang berikutnya dari meraih kalkulator. Ia juga mencatat basis mana yang Anda asumsikan, yang membantu jika ukuran akar kelak diubah.
Uji dengan pengaturan browser yang diubah
Bukti bahwa halaman dibangun dalam rem adalah bahwa ia bertahan pada ukuran teks bawaan yang lebih besar. Ubah pengaturan di browser Anda, muat ulang, dan lihat. Komponen yang rusak adalah yang ada sesuatu yang tertinggal dalam piksel atau tinggi tetap memotong teks.
Konverter terkait
Keluarga alat yang sama mencakup konversi di sekitarnya. Untuk kembali ke piksel, pakai rem ke px. Untuk ukuran relatif terhadap elemen, ada px ke em dan em ke px, dan untuk ukuran relatif terhadap layar, px ke vw dan vw ke px. Jika pekerjaan Anda mencakup warna selain ukuran, HEX ke RGB, RGB ke HEX, dan HEX ke HSL menangani notasi lembar gaya.
Contoh hitungan
Katakanlah mockup memberi judul kartu 28 px, padding kartu 20 px, dan celah 12 px antarkartu, dan proyek Anda memakai basis bawaan 16 px. Anda mengetik 28 dan membaca 1,75 rem, mengetik 20 dan membaca 1,25 rem, mengetik 12 dan membaca 0,75 rem. Dalam lembar gaya Anda menulis font-size: 1.75rem, padding: 1.25rem, dan gap: 0.75rem. Pengunjung yang menaikkan ukuran teks browser ke 20 px melihat kartu yang sama, diskalakan seperempat: judulnya 35 px, paddingnya 25 px, dan celahnya 15 px, semuanya proporsional. Seandainya Anda menulis piksel, judul akan tetap pada 28 dan kartu akan tampak salah.
Daftar periksa singkat
Sebelum mengonversi
Cari tahu basis yang dipakai CSS Anda. Putuskan ukuran mana yang harus diskalakan dan mana yang tidak.
Saat mengonversi
Ketik nilai piksel, periksa basis yang ditunjukkan di samping hasil, dan salin angka rem dengan satuannya.
Setelah mengonversi
Uji halaman dengan ukuran teks bawaan yang lebih besar di browser, dan cari kotak yang tak lagi menahan teksnya.
Kesalahan umum
Mengira 1 rem selalu 16 px
Ia hanya begitu ketika tak seorang pun mengubah ukuran akar, dan sebagian pembaca mengubahnya. Tulis tata letak agar bekerja pada ukuran lain juga.
Mengatur ukuran akar dalam piksel
Ia menimpa pilihan pembaca. Pakai persentase, atau jangan atur.
Mengonversi segalanya
Tidak setiap ukuran harus diskalakan. Biarkan batas dan bayangan dalam piksel.
Angka Anda tetap di perangkat Anda
Perhitungan terjadi secara lokal. Nilai Anda dipakai oleh browser Anda sendiri dan tidak ada yang dikirim ke mana pun. Tidak ada yang perlu dihapus sesudahnya dan tidak ada akun yang perlu dibuat. Itulah cara sederhana untuk konversi px ke rem.
Ringkasan
Untuk konversi px ke rem di sini, ketik ukuran dalam piksel dan baca dalam rem seketika, memakai rumus rem = px ÷ basis. Basis mulai pada 16 px, bawaan browser, dan Anda dapat mengubahnya agar cocok dengan CSS Anda. Konversi mempertahankan proporsi: tata letak yang ditulis dalam rem mempertahankan bentuknya ketika ukuran font akar berubah. Ia tak dapat mengetahui pengaturan pembaca Anda, jadi angka benar hanya untuk basis di kolom. Ukuran umum dalam tabel di bawah konverter, dari 8 px pada 0,5 rem hingga 64 px pada 4 rem, menghemat Anda dari mengulang aritmetika. Tidak ada yang diunggah.