Konverter Unit CSS

Mengonversi panjang CSS antara px, rem, em, pt, %, vw, dan vh.

Memuat alat…

Konverter Unit CSSKonversi satu nilai panjang CSS ke px, rem, em, pt, %, vw, dan vh sekaligus. Atur ukuran font root, ukuran font induk, serta lebar dan tinggi viewport, lalu ketik sebuah nilai dan pilih unitnya untuk melihat setiap padanan secara instan. Semuanya dihitung di browser Anda, jadi tidak ada yang Anda ketik yang pernah diunggah.

Apa itu Konverter Unit CSS?

Konverter Unit CSS adalah alat gratis di dalam browser yang menerjemahkan satu panjang CSS menjadi tujuh unit umum: px, rem, em, pt, %, vw, dan vh. Pengembang front-end dan desainer web menggunakannya untuk memindahkan tata letak antara piksel absolut dan unit responsif, untuk memeriksa berapa piksel sebuah rem dengan ukuran font root khusus, atau untuk mengubah nilai pt gaya cetak menjadi piksel layar. Karena rem bergantung pada ukuran font root, em dan % bergantung pada ukuran font induk, dan vw/vh bergantung pada viewport, konverter ini menampilkan keempatnya sebagai pengaturan yang dapat disesuaikan. Ketik sebuah nilai, pilih unit asalnya, dan setiap kolom hasil diperbarui sekaligus. Cuplikan CSS yang siap tempel mencantumkan ketujuh padanan sebagai deklarasi font-size.

Cara menggunakan Konverter Unit CSS

  1. Buka Pengaturan dan atur ukuran font root (font-size html yang menjadi dasar rem), ukuran font induk (untuk em dan %), serta lebar dan tinggi viewport (untuk vw dan vh).
  2. Ketik angka yang ingin Anda konversi pada kolom nilai.
  3. Pilih unit asal dari dropdown Dari: px, rem, em, pt, %, vw, atau vh.
  4. Baca setiap padanan di kolom hasil berlabel yang hanya-baca; semuanya dihitung ulang secara otomatis saat Anda mengubah nilai, unit, atau pengaturan apa pun.
  5. Salin cuplikan CSS yang dihasilkan untuk menempelkan ketujuh padanan font-size langsung ke lembar gaya Anda.

Contoh

px ke rem pada root 16

Masukan

Root 16px, nilai 16, Dari px

Keluaran

rem = 1

rem ke px pada root 10

Masukan

Root 10px, nilai 2, Dari rem

Keluaran

px = 20

px ke pt

Masukan

nilai 16, Dari px

Keluaran

pt = 12

Pertanyaan yang sering diajukan

Di antara unit apa saja ia mengonversi?
Tujuh unit panjang CSS: px, rem, em, pt, %, vw, dan vh. Salah satu di antaranya bisa menjadi unit asal, dan ketujuh padanan ditampilkan secara bersamaan.
Mengapa saya harus mengatur ukuran root, induk, dan viewport?
Unit-unit ini bersifat relatif. rem adalah kelipatan dari ukuran font root (html), em dan % relatif terhadap ukuran font induk, dan vw/vh adalah persentase dari lebar dan tinggi viewport. Mengaturnya di Pengaturan memberi tahu konverter ke nilai apa setiap unit relatif diuraikan.
Bagaimana pt ditangani?
CSS mendefinisikan 96px = 1in = 72pt, jadi 1pt sama dengan 4/3 px dan 1px sama dengan 0,75pt. Konverter menggunakan rasio tetap ini, terlepas dari ukuran font atau viewport.
Apa yang terjadi jika sebuah nilai atau pengaturan tidak valid?
Jika nilainya bukan angka yang terbatas, atau jika salah satu dari ukuran root, induk, atau viewport hilang, nol, atau negatif, kolom hasil menampilkan tanda hubung (—) hingga Anda memberikan angka yang valid.
Apakah ada yang dikirim ke server?
Tidak. Semua konversi berjalan sepenuhnya di sisi klien di browser Anda tanpa unggahan dan tanpa panggilan server, jadi nilai yang Anda masukkan tidak pernah meninggalkan perangkat Anda.

Alat terkait