Konversi rem ke px Root em ↔ Pixels Gratis Daring Aman
Ketik sebuah nilai dalam rem dan bacalah langsung dalam px. 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 rem ke px
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
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 Anda perlu konversi rem ke px
Anda membuka sebuah stylesheet dan melihat padding: 2.25rem pada sebuah kartu dan font-size: 0.8125rem pada sebuah keterangan. Itu nilai yang bagus, ditulis dengan cara CSS modern seharusnya ditulis, dan sekilas tidak memberi tahu Anda apa pun. Seberapa besar padding kartu itu di layar? Apakah keterangannya terbaca? Apakah cocok dengan 36 px dan 13 px dalam berkas desain yang diserahkan kepada Anda? Untuk menjawabnya, Anda konversi rem ke px: Anda mengalikan dengan ukuran font akar dan membaca jawabannya dalam satuan yang dipakai alat desain. Ini kebalikan dari arah yang biasa, dan inilah yang Anda lakukan saat membaca kode, memeriksa mockup terhadap build, atau menjelaskan tata letak kepada orang yang berpikir dalam piksel.
Konversinya mudah; yang membuatnya layak mendapat satu halaman adalah basisnya. Rem bukan ukuran, melainkan kelipatan sebuah ukuran, yaitu ukuran font elemen akar. Di browser yang tidak diberi tahu lain, ukuran itu 16 px, jadi 1 rem adalah 16 px, 2,25 rem adalah 36 px, dan 0,8125 rem adalah 13 px. Tetapi akar dapat diubah oleh stylesheet, dan pembaca dapat mengubahnya di browser, lalu setiap nilai rem di halaman ikut bergerak. Karena itu halaman ini menanyakan basis dan memakainya, alih-alih menyembunyikannya.
Perhitungan terjadi di browser Anda, dan tidak ada yang diunggah. Di bawah Anda akan menemukan rumusnya, tabel nilai umum, apa yang dipertahankan dan tidak dapat dipertahankan konversi, situasi ketika pengembang perlu konversi rem ke px, dan beberapa kebiasaan yang menjaga stylesheet berbasis rem mudah dibaca.
Rumus dan basisnya
px sama dengan rem dikali basis
Rumusnya satu perkalian: px = rem × basis. Dengan basis biasa 16 px, 1,5 rem menjadi 24 px, 0,75 rem menjadi 12 px, dan 4 rem menjadi 64 px. Halaman ini mencetak basis di samping hasil, sehingga baris seperti 1,5 rem = 24 px (16 px) menyatakan apa yang diasumsikan dan Anda bisa langsung melihat apakah cocok dengan proyek Anda.
Mencari tahu basis Anda
Cari di stylesheet sebuah aturan pada html atau :root yang menetapkan font-size. Jika tidak ada, basisnya adalah bawaan browser 16 px. Jika ada, seperti 62,5%, ambil persentase itu dari 16: 62,5% memberi 10 px. Di alat pengembang browser Anda juga dapat memilih elemen akar dan membaca ukuran font terhitungnya, yaitu angka yang diketik di kolom basis.
Ketika ukuran akar bersifat cair
Beberapa situs membuat ukuran akar tumbuh bersama jendela, memakai ekspresi clamp. Maka 1 rem tidak punya satu nilai piksel sama sekali: 15 px di ponsel dan 18 px di monitor lebar. Dalam hal itu setiap konversi hanyalah potret sesaat. Ketik basis yang Anda lihat pada lebar yang Anda pedulikan, dan pahami bahwa jawabannya hanya berlaku pada lebar itu.
Apa yang dipertahankan konversi dan apa yang tidak
Ia mempertahankan proporsi
Satu rem adalah berapa pun ukuran font akar, jadi tata letak yang ditulis dalam rem mempertahankan bentuknya ketika ukuran itu berubah. Saat Anda konversi rem ke px, nilai piksel adalah proporsi yang sama yang diwujudkan untuk satu basis tertentu. Rasio antara dua ukuran, misalnya judul 2 rem terhadap teks isi 1 rem, tidak berubah bagaimanapun Anda mengonversinya, dan rasio itulah yang menjadi sandaran tata letak yang baik.
Ia tidak dapat mengetahui pengaturan pembaca Anda
Angkanya bergantung sepenuhnya pada basis. Jika pembaca telah menaikkan ukuran teks bawaan browser mereka, yang dilakukan banyak orang dan itu hak mereka, maka 1 rem bukan 16 px bagi mereka, dan angka yang Anda lihat hanya benar untuk basis di kolom. Perlakukan nilai piksel sebagai cara memahami desain, bukan sebagai janji tentang apa yang akan dilihat setiap pengunjung.
Pembulatan
Karena basis biasanya bilangan bulat, hasil perkalian biasanya eksak. 0,8125 rem tepat 13 px pada basis 16; 0,6875 rem tepat 11 px. Jika Anda mendapat desimal panjang, itu tanda bahwa nilai rem dihitung dari basis yang berbeda dari yang Anda ketik.
Nilai umum
Tabel di bagian bawah halaman
Halaman ini menyertakan tabel nilai piksel yang sesuai dengan angka rem umum pada basis yang Anda tetapkan: 0,5 rem adalah 8 px, 0,625 adalah 10, 0,75 adalah 12, 0,875 adalah 14, 1 adalah 16, 1,125 adalah 18, 1,25 adalah 20, 1,5 adalah 24, 2 adalah 32, 3 adalah 48, dan 4 adalah 64. Ini nilai yang paling sering muncul dalam jarak dan skala tipografi, dan menghafalnya membuat stylesheet terbaca sekilas.
Membaca stylesheet dalam piksel
Latihan yang berguna adalah mengambil stylesheet yang tidak Anda tulis dan menerjemahkan nilai utamanya ke piksel sekali saja, menuliskan hasilnya dalam catatan. Ukuran isi 1 rem, judul 1,5 dan 2,25 rem, jarak kontainer 2 rem: dalam piksel, 16, 24, 36, dan 32. Dilihat begini, logika desain tampak, dan Anda dapat membandingkannya dengan berkas desain tanpa kalkulator.
Cara konversi rem ke px di sini
Ketik nilai rem
Masukkan ukuran dalam rem di kolom pertama. Desimal diterima, jadi 0,8125 bisa seperti halnya 1.
Atur basis
Biarkan di 16 jika CSS Anda tidak mengubah ukuran akar. Ubah jika mengubahnya. Hasil diperbarui saat Anda mengetik.
Baca nilai piksel
Jawaban muncul seketika, dengan basis ditampilkan di sampingnya, sehingga Anda dapat tahu apa yang diasumsikan. Salin ke catatan Anda atau bandingkan dengan berkas desain.
Dari mana satuan ini berasal
Piksel CSS
Ketika layar berhenti punya kerapatan yang dapat diprediksi, halaman yang diukur dalam piksel nyata menjadi halaman yang mengecil seiring layar makin tajam. Maka piksel CSS didefinisikan ulang sebagai panjang acuan: sekitar 1/96 inci yang dilihat pada jarak baca yang nyaman. Piksel dalam stylesheet karena itu bukan titik di layar Anda melainkan satuan panjang yang dipetakan browser ke sebanyak titik yang dibutuhkan layar.
Rem
Em lebih tua daripada web: dalam huruf logam ia adalah lebar balok cor, dinamai dari huruf kapital M, dan dalam CSS ia berarti ukuran font yang berlaku, itulah sebabnya ia berubah ketika Anda menyarangkan elemen. Rem ditambahkan untuk lolos dari hal itu: ia adalah em dari elemen akar dan tidak pernah berlipat. Untuk melihat perbedaannya dalam angka, konversi px ke em dan bandingkan dengan yang Anda dapat ketika Anda konversi rem ke px.
Kapan pengembang konversi rem ke px
Memeriksa build terhadap berkas desain
Desainer menyerahkan berkas dalam piksel; pengembang menulis kode dalam rem. Untuk memeriksa apakah halaman cocok, mereka konversi rem ke px dan membandingkan angka. Ketidakcocokan langsung terlihat: 1,375 rem adalah 22 px, dan jika desain menyebut 24, salah satunya keliru.
Membaca kode yang asing
Ketika Anda mewarisi stylesheet, nilai rem menyembunyikan ukuran sebenarnya. Mengonversi beberapa yang utama memberi Anda peta desain: seberapa besar tipografinya, selebar apa talangnya, di mana breakpoint jatuh.
Menulis laporan bug dan dokumentasi
Orang yang menguji halaman menggambarkan apa yang mereka lihat dalam piksel. Pengembang yang berkata padding-nya 2,5 rem kurang bermakna bagi penguji; 40 px bermakna. Konversi membuat kedua pihak saling memahami.
Menetapkan nilai yang harus eksak dalam piksel
Beberapa hal harus berupa jumlah piksel perangkat yang tepat atau tampak kabur: garis tepi satu piksel, ikon yang digambar pada kisi 24 px. Jika ukuran harus jatuh pada kisi piksel, konversi rem ke px memberi tahu Anda apakah ia jatuh pada basis Anda.
Jebakan saat Anda konversi rem ke px
Melupakan ukuran akar yang diubah
Jika akar diatur ke 62,5% atau ke ekspresi clamp, faktor standar 16 tidak berlaku. Hasilnya salah sebesar rasio kedua basis. Selalu periksa basisnya terlebih dahulu.
Mencampur rem dengan em
Em relatif terhadap ukuran font elemen itu sendiri, bukan terhadap akar. Nilai 1,5em di dalam judul 24 px adalah 36 px, tetapi di dalam paragraf 16 px adalah 24 px. Halaman ini mengonversi rem, yang tidak punya ambiguitas semacam itu. Untuk em, lihat em ke px.
Menganggap layar menampilkan piksel yang sama
Piksel CSS bukan piksel perangkat. Pada layar berkerapatan tinggi satu piksel CSS bisa berupa dua atau tiga piksel perangkat. Konversi memberi piksel CSS, yang dipakai alat desain maupun stylesheet.
Membulatkan terlalu dini
Jika Anda membulatkan 13,333 px menjadi 13 lalu mengonversi balik, Anda mendapat 0,8125 rem, bukan 0,8333 yang Anda mulai. Simpan nilai rem asli bila itu penting.
Pertanyaan yang sering diajukan sebelum mengonversi
Berapa piksel 1 rem?
Enam belas, di browser yang bawaannya belum diubah.
Berapa piksel 2 rem?
Tiga puluh dua pada basis bawaan. Pada basis 10 ia akan menjadi 20.
Mengapa browser saya menampilkan sesuatu yang berbeda?
Pengaturan pembaca atau aturan dalam stylesheet telah mengubah ukuran akar. Lihat ukuran font terhitung dari elemen akar di alat pengembang.
Apakah rem sama dengan em?
Tidak. Rem merujuk ke elemen akar dan em merujuk ke elemen itu sendiri.
Apakah angka saya diunggah?
Tidak. Hitungannya berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan px ke rem, yang membagi alih-alih mengalikan.
Kebiasaan yang membuat stylesheet rem mudah dibaca
Tulis nilai piksel dalam komentar
Baris seperti gap: 1.5rem; /* 24px */ hanya memakan beberapa karakter dan menghemat satu konversi bagi pembaca berikutnya. Ia juga mencatat basis yang Anda asumsikan.
Pakai skala kecil
Proyek yang hanya memakai segelintir nilai rem, seperti 0,5, 1, 1,5, 2, dan 3, mudah dipelajari: setelah sehari Anda mengetahuinya dalam piksel tanpa berpikir. Ketika Anda konversi rem ke px untuk stylesheet semacam itu, Anda hanya memastikan apa yang Anda ingat.
Beri nama nilai Anda
Dengan properti kustom, seperti --space-md: 1.5rem, stylesheet menggambarkan maksud alih-alih angka. Nama membawa maknanya, dan angkanya berada di satu tempat.
Uji dengan ukuran bawaan yang berbeda
Naikkan ukuran teks bawaan di browser Anda dan lihat halamannya. Jika tetap utuh, tata letak benar-benar dibangun dalam rem. Jika rusak, ada yang tertinggal dalam piksel.
Memakai nilai piksel dengan baik setelah Anda konversi rem ke px
Bandingkan rasio, bukan hanya angka
Ketika Anda konversi rem ke px untuk seluruh stylesheet, lihat rasio antar ukuran selain ukurannya sendiri. Skala tipografi di mana setiap langkah sekitar 1,25 kali sebelumnya memberi 16, 20, 25, 31, dan 39 piksel; skala 1,5 memberi 16, 24, 36, dan 54. Mengenali rasio memberi tahu Anda apa yang dimaksud desainer, dan memungkinkan Anda memperluas skala secara konsisten ketika memerlukan ukuran baru.
Terjemahkan untuk orang yang berpikir dalam piksel
Tidak semua orang dalam tim membaca rem. Manajer proyek, penulis naskah, dan klien sering bekerja dari tangkapan layar dan meminta judul sedikit lebih besar. Jika Anda dapat mengatakan bahwa judul sekarang 36 px dan akan menjadi 40 px pada 2,5 rem, percakapannya singkat. Halaman ini berguna sebagai jembatan cepat antara kedua kosakata itu.
Periksa target sentuh dan ukuran minimum
Pedoman layar sentuh meminta target setidaknya sekitar 44 px, dan pedoman teks meminta teks isi sekitar 16 px atau lebih. Keduanya dinyatakan dalam piksel. Untuk memverifikasi stylesheet yang ditulis dalam rem terhadapnya, konversi rem ke px dan lihat apakah tombol dan teks melewati batasnya.
Perhatikan kasus yang diperbesar
Nilai yang Anda dapat adalah untuk basis yang Anda ketik. Jika pembaca Anda mungkin memperbesar teks, coba konversi lagi dengan basis 20 atau 24 dan lihat apa yang diminta tata letak dari layar. Kartu yang nyaman pada 16 bisa meluap pada 24, dan waktu terbaik untuk mengetahuinya adalah sebelum halaman diterbitkan.
Konverter terkait
Keluarga alat yang sama mencakup konversi di sekitarnya. Untuk kembali ke rem, pakai px ke rem. 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. Untuk warna dalam stylesheet yang sama, HEX ke RGB dan HSL ke HEX tersedia, dan untuk nama kelas, teks ke kebab-case mengubah frasa menjadi nama yang diterima CSS.
Contoh hitungan
Katakanlah Anda meninjau pull request dan stylesheet punya bagian hero dengan padding: 5rem 1.5rem, judul 3.5rem, dan paragraf pembuka 1.25rem. Berkas desain menyebut padding 80 px dan 24 px, judul 56 px, dan pembuka 20 px. Anda mengetik 5 dan membaca 80 px, mengetik 1,5 dan membaca 24, mengetik 3,5 dan membaca 56, mengetik 1,25 dan membaca 20. Keempatnya cocok, jadi build-nya setia. Jika judulnya 3,25 rem, Anda akan membaca 52 dan melihat perbedaannya sebelum sampai ke desainer.
Daftar periksa singkat
Sebelum mengonversi
Temukan basis: aturan akar di stylesheet, atau ukuran terhitung di alat pengembang.
Saat mengonversi
Ketik nilai rem, periksa basis yang ditampilkan di samping hasil, dan catat angka pikselnya.
Setelah mengonversi
Bandingkan dengan berkas desain. Jika angkanya berbeda, periksa basis sebelum Anda mencurigai kodenya.
Kesalahan umum
Memakai 16 tanpa memeriksa
Itu bawaan, bukan aturan. Periksa akarnya.
Menganggap piksel sebagai final
Jawabannya berlaku untuk satu basis. Pembaca dengan bawaan lebih besar melihat piksel lebih besar.
Mencampur rem dan em
Keduanya tampak serupa dan berperilaku berbeda. Pakai halaman yang tepat untuk masing-masing.
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 setelahnya dan tidak ada akun yang harus dibuat. Itulah cara sederhana untuk konversi rem ke px.
Ringkasan
Untuk konversi rem ke px di sini, ketik ukuran dalam rem dan baca dalam piksel seketika, memakai rumus px = rem × basis. Basis dimulai dari 16 px, bawaan browser, dan Anda dapat mengubahnya agar sesuai dengan CSS Anda. Konversi mempertahankan proporsi, karena satu rem adalah berapa pun ukuran font akar, dan ia tidak dapat mengetahui pengaturan pembaca Anda, jadi angkanya hanya benar untuk basis di kolom. Tabel nilai umum, dari 0,5 rem pada 8 px hingga 4 rem pada 64 px, membantu Anda membaca stylesheet sekilas. Tidak ada yang diunggah.