Pengonversi Unit Area Pandang

• Konversi Instan Antar Semua Unit Area Pandang: Pengonversi Unit Area Pandang secara instan mengkonversi nilai antara vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh, dan banyak lagi - ditambah px, rem, em, pt, persentase, dan unit fisik. Setiap penekanan tombol memperbarui semua hasil secara real-time tanpa perlu menekan tombol.
• Preset Perangkat Nyata & Area Pandang Khusus: Pilih dari 11 prasetel perangkat - iPhone, iPad, Pixel, Galaxy, dan beberapa ukuran desktop - atau masukkan dimensi area pandang khusus. Lihat dengan tepat bagaimana nilai CSS Anda berperilaku pada titik henti sementara yang berbeda tanpa berpindah DevTools browser.
• Semua Unit dalam Satu Tampilan: Lihat setiap konversi unit sekaligus dalam tabel hasil yang dapat digulir. Setiap baris menunjukkan nama unit dan nilai yang dikonversi dengan tombol salin sekali klik. Hasil utama terlihat jelas dengan konteks dimensi area pandang saat ini.
• Preset Cepat Nilai CSS: Pilih dengan cepat dari 17 nilai CSS umum (1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 100) untuk langsung melihat apa yang setara di setiap unit area pandang - sempurna untuk alur kerja desain responsif.

• Pengembangan CSS Responsif: Pengembang front-end menggunakan Viewport Unit Converter untuk menerjemahkan nilai piksel mockup desain menjadi unit viewport responsif (vw, vh, vmin, vmax). Konversikan ukuran font, spasi, dan dimensi elemen di berbagai ukuran area pandang tanpa penghitungan manual.
• Desain Responsif Mobile-First: Desainer seluler menggunakan Viewport Unit Converter untuk memastikan nilai CSS berfungsi di berbagai ukuran ponsel. Uji bagaimana ukuran font 5vw ditampilkan pada iPhone SE (375 piksel) vs Pixel 7 (412 piksel) dan sesuaikan untuk tipografi yang konsisten.
• Perencanaan Tablet & Breakpoint: Desainer dan pengembang menggunakan Viewport Unit Converter untuk merencanakan breakpoint responsif. Pahami perilaku unit area pandang di iPad (744-834 piksel) dan ukuran tablet untuk memastikan penskalaan yang lancar antara tata letak seluler dan desktop.
• Handoff Desain-ke-Kode: Desainer menggunakan Viewport Unit Converter selama handoff desain-ke-pengembangan. Konversikan nilai piksel Figma ke unit area pandang yang setara pada ukuran area pandang target, sehingga memberi pengembang nilai CSS yang tepat dan sesuai dengan maksud desain.
• Layar Besar & Tata Letak Desktop: Pengembang desktop menggunakan Viewport Unit Converter untuk menguji nilai CSS pada ukuran desktop umum - 1024px, 1280px, 1366px, 1440px, dan 1920px. Pastikan tata letak berbasis vw berskala dengan benar dari laptop standar hingga monitor ultra lebar.
• Ukuran Font & Sistem Spasi: Pengelola sistem desain menggunakan Viewport Unit Converter untuk membuat skala tipe dan spasi yang responsif. Konversi antara rem (root-relative), vw (viewport-relative), dan px (absolute) untuk membuat token desain konsisten dengan skala yang dapat diprediksi.

Unit area pandang CSS adalah satuan panjang relatif yang dihitung berdasarkan ukuran area pandang - area halaman web yang terlihat di jendela browser. Ada tiga kategori unit viewport. Unit klasik ( vw , vh , vmin , vmax ) didasarkan pada blok awal yang memuatnya. Unit baru yang ditambahkan di Nilai CSS Level 4 memberikan kontrol yang lebih tepat: dvw/dvh (dinamis - merespons perubahan chrome browser), svw/svh (kecil - menggunakan area pandang sekecil mungkin), dan lvw/lvh (besar - menggunakan area pandang sebesar mungkin). Pengonversi Unit Viewport kami memungkinkan Anda mengonversi antara semua unit ini dan unit panjang CSS lainnya, membantu Anda membuat desain responsif dengan percaya diri.

1. Masukkan Nilai Anda: Ketikkan nilai numerik dan pilih unit sumber (misalnya 16 vw). Gunakan preset nilai CSS umum untuk menguji dengan cepat nilai spasi standar seperti 8, 16, 24, 32, 48, dan 64.
2. Mengatur Ukuran Area Pandang: Pilih prasetel perangkat (iPhone, iPad, ukuran desktop) atau masukkan lebar dan tinggi area pandang khusus. Ukuran font root (untuk rem) dan ukuran font induk (untuk em) juga dapat dikonfigurasi. Semua konversi diperbarui secara instan saat Anda mengubah pengaturan apa pun.
3. Baca Hasil: Konversi utama (ke piksel) ditampilkan dengan jelas, sedangkan tabel hasil lengkap menampilkan nilai setara di setiap unit yang didukung - unit area pandang, unit relatif font, unit fisik, persentase, dan banyak lagi. Salin nilai individual atau semua nilai sekaligus dengan satu klik.

• Unit Area Pandang Klasik (vw, vh, vmin, vmax): 1vw = 1% lebar area pandang, 1vh = 1% tinggi area pandang, 1vmin = 1% dimensi lebih kecil (berguna untuk memastikan elemen pas di kedua orientasi), dan 1vmax = 1% dimensi lebih besar. Ini didasarkan pada blok penampung awal dan memiliki dukungan browser yang sangat baik.
• Unit Area Pandang Dinamis (dvw, dvh, dvmin, dvmax): Unit ini merespons perubahan dinamis dalam ukuran area pandang yang disebabkan oleh chrome browser (bilah alamat, bilah alat) yang muncul atau menghilang saat pengguna menggulir. Pada browser seluler, 100dvh memberi Anda ketinggian nyata yang terlihat termasuk perubahan dinamis, memecahkan masalah klasik "100vh menyertakan bilah alamat".
• Unit Area Pandang Kecil & Besar (svw, svh, lvw, lvh): Unit area pandang kecil menggunakan ukuran area pandang sekecil mungkin (dengan browser chrome terlihat sepenuhnya). Unit area pandang yang besar menggunakan ukuran area pandang sebesar mungkin (dengan browser chrome disembunyikan). Menggunakan 100svh memastikan elemen Anda pas dengan bilah alamat yang ditampilkan, sementara 100lvh memenuhi layar penuh setelah pengguna menggulir.
• Unit Fisik & Relatif Font: px (piksel CSS), pt (titik), cm, mm, in (inci), pc (picas), q (seperempat milimeter), rem (root em), em (parent em), ch (lebar karakter "0"), dan ex (tinggi x dari "x"). Viewport Unit Converter menangani semua ini bersama dengan unit viewport untuk konversi panjang CSS yang lengkap.

Unit area pandang sangat kuat tetapi memerlukan penggunaan yang hati-hati:

• Tipografi: Gunakan penjepit() dengan unit vw untuk ukuran font responsif yang tetap dalam batas min/maks - misalnya, font-size: Clamp(16px, 2vw, 24px) . Gunakan konverter untuk menemukan nilai vw yang tepat untuk ukuran piksel target Anda.
• Elemen tinggi penuh: Di perangkat seluler, tinggi: 100vh bisa lebih besar dari area yang terlihat karena browser chrome. Pertimbangkan untuk menggunakan 100dvh (dinamis) atau 100lvh (besar) untuk tata letak layar penuh.
• Hindari penggunaan berlebihan dalam isi teks: Unit area pandang pada teks isi dapat menyebabkan masalah aksesibilitas karena pengguna tidak dapat mengubah ukuran teks yang menggunakan unit vw di beberapa browser. Gunakan rem untuk teks isi dan cadangan vw untuk judul dan elemen besar.
• Uji pada beberapa titik henti sementara: Nilai yang berfungsi pada 1440 piksel mungkin terlalu besar pada 375 piksel atau terlalu kecil pada 2560 piksel. Gunakan Pengonversi Unit Area Pandang dengan preset perangkat berbeda untuk memverifikasi nilai Anda di seluruh rentang ukuran area pandang.