Apakah Penukar Unit CSS?
CSS menyokong beberapa unit berbeza untuk saiz — unit mutlak seperti px dan pt, dan unit relatif seperti rem, em, vw, vh, dan %. Unit relatif penting untuk reka bentuk responsif dan mudah diakses (rem khususnya menghormati keutamaan saiz fon pelayar pengguna), tetapi menukar antaranya secara mental sememangnya sukar, kerana hasilnya bergantung pada konteks: saiz fon root, saiz fon elemen semasa, atau dimensi viewport.
Penukar ini melakukan pengiraan tersebut untuk anda: tetapkan saiz fon asas, dimensi viewport, dan nilai yang anda tukar daripada, dan lihat nilai setara dalam setiap unit lain serta-merta — berguna untuk menterjemah ukuran piksel mock-up reka bentuk kepada nilai rem/vw responsif, atau menyemak semula apa yang sebenarnya dipaparkan oleh peraturan CSS sedia ada pada skrin.
Bila Menggunakan Kalkulator Ini
- Apabila anda perlu menilai kos alat sebelum memulakan projek
- Apabila membandingkan hasil dengan alat serupa lain
- Apabila mempelajari cara menggunakan alat dalam pelbagai senario
- Apabila berkongsi hasil dengan pasukan atau pelanggan
- Apabila mengesahkan ketepatan pengiraan alat
- Apabila mencari cara pantas dan mudah untuk menyelesaikan masalah tertentu
Langkah:
- Masukkan nilai yang anda mahu tukar dan pilih unit permulaannya.
- Tetapkan saiz fon asas anda (lalai kepada piawaian pelayar iaitu 16px).
- Untuk penukaran vw/vh, masukkan lebar dan tinggi viewport sasaran anda.
- Baca nilai setara dalam setiap unit lain serta-merta.
Rumus
1rem = 1em = saiz fon asas (lalai 16px)
1pt = 96/72 px ≈ 1.333px
1vw = lebar viewport / 100
1vh = tinggi viewport / 100
1% = nilai rujukan / 100
Kes Penggunaan
- Menukar spesifikasi piksel Figma/Sketch pereka kepada nilai rem untuk CSS yang mudah diakses
- Menyemak apa sebenarnya yang dipaparkan saiz fon responsif berasaskan vw pada lebar skrin tertentu
- Menterjemah CSS cetak atau e-mel warisan berasaskan pt kepada px atau rem piawaian web
- Mengaudit sama ada skala ruang sistem reka bentuk sepadan dengan bersih merentas unit
- Menyemak dengan pantas nilai CSS semasa semakan kod tanpa membuka alat pembangun
Faedah Utama
- Tukar antara kesemua 7 unit CSS biasa di satu tempat
- Menggunakan saiz fon asas dan viewport sebenar anda, bukan andaian tetap
- Hasil serta-merta semasa anda menaip — tiada keperluan membuka alat pembangun pelayar
- Percuma, tiada pendaftaran, berjalan sepenuhnya dalam pelayar anda
Tips Pro
- Utamakan rem berbanding em untuk saiz fon bagi mengelakkan pertambahan yang tidak dijangka dalam komponen bersarang
- Gunakan dvh/svh dan bukannya vh untuk susun atur skrin penuh mudah alih jika pelayar sasaran anda menyokongnya
- Kekalkan saiz fon asas yang konsisten merentas sistem reka bentuk anda supaya penukaran rem kekal boleh diramal
- Semasa menterjemah reka bentuk piksel-sempurna, tukar ruang kepada rem tetapi kekalkan lebar sempadan dan butiran halus lain dalam px
Kesilapan Biasa
- Menganggap 1rem sentiasa bersamaan 16px, tanpa menyemak sama ada saiz fon root telah ditukar
- Menggunakan vh untuk susun atur tinggi penuh mudah alih tanpa mengambil kira kelakuan bar alamat pelayar
- Menyarangkan saiz fon berasaskan em dan terkejut apabila ia bertambah secara tidak dijangka
- Mencampur px dan rem secara tidak konsisten dalam komponen yang sama, merosakkan penskalaan kebolehcapaian
Istilah Utama
- Saiz fon root: Saiz fon yang ditetapkan pada elemen html, yang menjadi rujukan bagi semua unit rem
- Viewport: Kawasan halaman web yang kelihatan dalam tetingkap pelayar
- Unit mutlak: Unit seperti px atau pt dengan saiz sebenar tetap, tidak relatif kepada mana-mana konteks
- Unit relatif: Unit seperti rem, em, vw, atau % yang saiznya bergantung pada nilai lain
Konsep Berkaitan
- Penukar Warna: Tukar antara format warna HEX, RGB, dan HSL
- Penukar Panjang: Tukar antara inci, sentimeter, piksel, dan lain-lain
- Penukar Unit: Tukar antara pelbagai unit pengukuran
- Kalkulator Nisbah Bidang: Kira dan tukar nisbah bidang
- Penukar Data: Tukar antara bait, KB, MB, GB, dan TB
Contoh
Pada saiz fon asas 16px, 1.5rem ditukar kepada 24px. Pada lebar viewport 1440px, 5vw ditukar kepada 72px.
Mentafsir Hasil
Alat ini memaparkan keputusan terperinci berdasarkan input anda. Semak setiap bahagian dengan teliti untuk memahami cara mentafsir angka dan membuat keputusan berdasarkannya.
Jika anda mempunyai sebarang soalan tentang cara alat ini berfungsi atau cara mentafsir keputusan tertentu, sila rujuk bahagian Soalan Lazim di bawah atau hubungi sokongan.