Konversi vw ke px Viewport width ↔ Pixels Gratis Daring Aman
Ketik sebuah nilai dalam vw 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 vw ke px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
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 mengonversi vw ke px
Sebuah stylesheet menulis font-size: 5.2vw pada judul hero, margin-top: 8vw pada sebuah seksi, dan width: 42vw pada sebuah gambar. Itu nilai-nilai yang lentur, dan mereka tidak memberi tahu apa yang ada di layar. Seberapa besar judul itu di ponsel? Selebar apa gambar itu di laptop? Apakah margin itu tampak tepat pada 1920 piksel? Untuk mengetahuinya Anda mengonversi vw ke px: Anda mengalikan angkanya dengan lebar jendela dan membaginya dengan seratus, lalu membaca jawabannya dalam satuan yang dipakai desainer, penguji, dan klien. Itulah yang Anda lakukan ketika meninjau kode cair, memeriksa hasil build terhadap mockup, atau menjelaskan kepada rekan mengapa judul tampak kecil di layar sempit.
Yang membuat konversi ini berbeda dari rem atau em adalah bahwa pengalinya adalah jendela itu sendiri. Satu vw adalah seperseratus lebar viewport, jadi 5,2vw adalah 52 px di jendela selebar 1000 px, 18,7 px di ponsel selebar 360 px, dan 99,8 px di monitor lebar 1920. Tidak ada bawaan untuk dijadikan pegangan, dan lebarnya berubah ketika pembaca memutar ponsel atau menyeret jendela. Konverter karenanya meminta lebar, menampilkannya di samping jawaban, dan mulai pada 1440 px, lebar yang sering dipakai untuk menggambar desain.
Perhitungan terjadi di browser Anda, dan tidak ada yang diunggah. Di bawah Anda akan menemukan rumusnya, apa yang dipertahankan dan tidak dapat dipertahankan konversi ini, cara membaca stylesheet cair pada beberapa lebar, jebakan scrollbar, masalah aksesibilitas teks dalam vw murni, dan beberapa kebiasaan yang menjaga kode cair tetap mudah dipahami.
Rumus dan lebarnya
px sama dengan vw dikalikan lebar, dibagi seratus
Rumusnya adalah px = vw × lebar ÷ 100. Pada lebar 1440 px, 10 vw menjadi 144 px, 5 vw menjadi 72 px, dan 1,667 vw menjadi 24 px. Halaman mencetak lebar di samping hasil, jadi baris seperti 10 vw = 144 px (1440 px) memberi tahu apa yang diasumsikan. Untuk melihat layar lain, ubah lebar dan baca hasilnya lagi.
Lebar mana yang dicoba
Kumpulan yang berguna untuk diperiksa adalah 360 atau 390 untuk ponsel, 768 untuk tablet potret, 1024 untuk laptop kecil, 1440 untuk laptop atau desktop tipikal, dan 1920 untuk monitor full-HD. Ketik masing-masing di kolom lebar dan catat hasilnya. Lima pembacaan menunjukkan seluruh rentang sebuah nilai, dan setiap lonjakan ekstrem langsung terlihat.
Memakai lebar jendela yang sebenarnya
Di alat pengembang browser Anda, toolbar perangkat menampilkan lebar jendela dalam piksel. Pakai angka itu untuk membandingkan apa yang dilakukan halaman dengan apa yang dikatakan konverter. Jika keduanya cocok, bacaan Anda atas stylesheet sudah benar.
Apa yang dipertahankan konversi dan apa yang tidak
Ia mempertahankan bagian dari layar
Satu vw adalah seperseratus lebar viewport, jadi ukuran yang ditulis dalam vw tumbuh dan menyusut bersama jendela alih-alih tetap di tempat. Nilai piksel yang Anda dapat adalah bagian itu yang dikonkretkan untuk satu lebar tertentu.
Ia tidak dapat memberi bawaan
Tidak seperti rem, vw tidak punya bawaan. Browser memberi ukuran font akar 16 px ketika tak ada yang menyatakan lain, jadi halaman rem dapat mulai dari angka nyata; lebar viewport hanyalah selebar jendela pembaca, dan ia berubah ketika mereka memutar ponsel. Angka 1440 px di sini adalah lebar yang sering dipakai untuk menggambar desain, sebuah kebiasaan dan bukan standar. Ketik milik Anda sendiri.
Pembulatan
Mengalikan dengan lebar dan membagi dengan 100 dapat menghasilkan desimal. 6,67 vw pada 1440 px adalah 96,048 px. Browser menangani piksel pecahan, tetapi jika Anda memerlukan bilangan bulat untuk berkas desain, bulatkan dan catat bahwa pembulatan itu milik Anda.
Membaca stylesheet cair
Ambil tiga lebar dan tulis hasilnya
Pilih lebar sempit, menengah, dan lebar, misalnya 375, 1024, dan 1920. Untuk setiap nilai vw penting dalam stylesheet, konversikan vw ke px pada setiap lebar dan tulis ketiga angka dalam sebuah catatan. Judul 5,2 vw menghasilkan 19,5, 53,2, dan 99,8 piksel. Dilihat begini, Anda tahu apakah judul terbaca di ujung sempit dan tidak membanjiri di ujung lebar.
Cari clamp
Kode cair yang ditulis dengan baik memberi batas di sekitar vw dengan clamp(min, preferred, max). Jika Anda melihat clamp(2rem, 1rem + 4vw, 6rem), ukurannya tumbuh antara 32 dan 96 px dan bertahan di kedua ujung. Ketika Anda mengonversi bagian vw, ingat bahwa itu hanya bagian tengah rentang, dan batasnya menentukan apa yang terjadi di tepi.
Periksa ekstremnya
Lebar yang berisiko adalah yang terkecil dan terbesar. Pada 320 px judul 6 vw adalah 19 px; pada 2560 ia 154 px. Jika keduanya tidak tampak dapat diterima dan tidak ada clamp, stylesheet memerlukan batas.
Jebakan saat Anda mengonversi vw ke px
Scrollbar
Pada browser desktop, lebar viewport yang dipakai untuk vw mencakup lebar scrollbar vertikal. Jadi 100vw sedikit lebih lebar daripada area yang terlihat ketika halaman menggulir, sekitar 15 sampai 17 piksel pada banyak sistem. Nilai piksel yang Anda hitung karenanya sedikit lebih besar daripada lebar terlihat yang tampaknya diwakilinya. Pada ponsel, tempat scrollbar menimpa halaman, pengaruh itu tidak ada.
Memakai lebar yang salah
Hasilnya hanya sebenar lebar yang Anda ketik. Jika jendela uji Anda selebar 1366 px dan Anda mengonversi pada 1440, setiap nilai meleset sekitar lima persen. Baca lebar sebenarnya dari alat pengembang.
Mengacaukan vw dengan persen
Lebar 50% merujuk pada lebar induk, sedangkan 50vw merujuk pada jendela. Di dalam wadah sempit keduanya sangat berbeda. Konverter memberi jawaban vw; jika elemen Anda berada di dalam wadah, induknya mungkin lebih sempit daripada jendela.
Lupa bahwa teks dalam vw tidak dapat diperbesar
Teks yang berukuran hanya dalam vw tidak merespons ketika pembaca memperbesar halaman, karena jendela dan teks berskala bersama. Pedoman aksesibilitas meminta agar teks dapat diubah ukurannya. Tambahkan suku rem, seperti dalam clamp(), agar teks juga merespons zoom.
Pertanyaan yang diajukan orang sebelum mengonversi
Berapa piksel 1 vw?
Seperseratus lebar jendela: 14,4 px pada 1440, 10 px pada 1000, 3,6 px pada 360.
Berapa piksel 50 vw?
Setengah jendela: 720 px pada lebar 1440, 500 px pada lebar 1000.
Mengapa halaman saya lebih lebar daripada layar?
Kotak 100vw pada halaman yang menggulir lebih lebar daripada area terlihat karena scrollbar dihitung. Pakai 100% di dalam wadah sebagai gantinya.
Apakah vw sama dengan persen?
Tidak. Persen merujuk pada induk, vw pada jendela.
Apakah angka saya diunggah?
Tidak. Aritmetika berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan px ke vw, yang membagi dengan lebar alih-alih mengalikan.
Nilai umum pada lebar umum
Tabel mental
Ada gunanya mengetahui beberapa jangkar agar Anda dapat memperkirakan sebelum memakai konverter. Pada lebar 1000 px, 1 vw adalah 10 px, yang membuat aritmetika sepele: 2,5 vw adalah 25 px, 8 vw adalah 80 px. Pada 1440 px, 1 vw adalah 14,4 px. Pada 375 px, 1 vw adalah 3,75 px, jadi judul 8 vw adalah 30 px. Ketika Anda mengonversi vw ke px untuk pemeriksaan cepat, mulailah dari salah satu jangkar ini dan skalakan.
Tiga lebar, satu stylesheet
Ambil kartu dengan lebar 80vw, celah 4vw, dan judul 6vw. Pada ponsel 375 px hasilnya 300 px, 15 px, dan 22,5 px. Pada tablet 768 px, 614 px, 30,7 px, dan 46 px. Pada desktop 1440 px, 1152 px, 57,6 px, dan 86,4 px. Melihat ketiganya berdampingan memberi tahu Anda sekaligus bahwa kartu jauh terlalu lebar di desktop dan judulnya jauh terlalu besar, dan bahwa Anda mungkin menginginkan lebar maksimum dan clamp.
Melampaui viewport
Satuan wadah
CSS yang lebih baru menawarkan satuan relatif terhadap wadah alih-alih jendela, seperti cqw, yaitu seperseratus lebar wadah. Mereka menyelesaikan masalah bahwa komponen yang ditaruh di sidebar sempit berperilaku seolah memiliki seluruh jendela. Jika Anda memakainya, aritmetikanya sama seperti vw, dengan lebar wadah sebagai dasar, dan Anda dapat memakai konverter ini dengan mengetik lebar itu.
Viewport kecil, besar, dan dinamis
Pada ponsel, area terlihat berubah ketika bilah alamat bergeser pergi. Untuk tinggi, satuan yang lebih baru svh, lvh, dan dvh menggambarkan viewport kecil, besar, dan dinamis. Untuk lebar situasinya lebih sederhana, karena bilah alamat tidak memengaruhinya, dan vw stabil. Itu satu alasan lagi mengapa vw adalah satuan yang lebih aman daripada vh untuk desain cair di seluler.
Persen, vw, dan grid
Lebar persen mengikuti induk, vw mengikuti jendela, dan CSS grid serta flexbox mengikuti ruang yang tersedia. Sering tata letak cair terbaik memakai grid dan persentase untuk struktur dan vw hanya untuk huruf dan spasi, karena itulah hal yang diuntungkan oleh mengikuti layar secara langsung. Ketika Anda mengonversi vw ke px untuk memeriksa tata letak, tanyakan apakah track grid akan mengatakan hal yang sama dengan lebih tangguh.
Menjelaskan vw kepada orang yang tidak menulis CSS
Pakai jendela sebagai penggaris
Klien dan rekan biasanya memahami gagasan ini begitu Anda mengatakan bahwa satu vw adalah satu persen lebar layar. Judul 5 vw selebar lima persen layar. Lalu tunjukkan dua angka kepada mereka: berapa hasilnya di ponsel mereka sendiri dan di monitor besar di ruang rapat. Ketika Anda mengonversi vw ke px untuk kedua lebar dan menyebutkan hasilnya dengan lantang, gagasan tentang ukuran yang bergerak bersama layar menjadi konkret.
Katakan mengapa desain tidak tetap
Pemangku kepentingan nonteknis kadang bertanya mengapa halaman tidak punya satu ukuran saja untuk judul. Jawabannya adalah layar berbeda dengan faktor tujuh atau delapan antara ponsel terkecil dan monitor terbesar, dan ukuran tetap yang cocok untuk satu salah untuk yang lain. Satuan cair adalah jawabannya, dan angka piksel dari halaman ini menunjukkan seberapa besar layar mengubah nilai yang sama.
Dari mana satuan-satuan ini berasal
Piksel CSS
Ketika layar berhenti punya kepadatan yang dapat diprediksi, halaman yang diukur dalam piksel nyata menjadi halaman yang menyusut ketika layar makin tajam. Maka piksel CSS didefinisikan ulang sebagai panjang acuan: sekitar 1/96 inci yang dilihat pada jarak baca yang nyaman. Itulah satuan yang dipakai halaman ini untuk memberi jawaban.
Satuan viewport
Vw hadir bersama desain responsif: seperseratus lebar viewport, selebar apa pun jadinya. Ia berdampingan dengan rem, relatif terhadap ukuran font akar, dan em, relatif terhadap elemen. Untuk melihat bagaimana nilai piksel yang sama tampak dalam satuan-satuan itu, konversi rem ke px dan bandingkan.
Kebiasaan yang menjaga kode cair tetap mudah dipahami
Beri komentar pada nilai piksel
Baris seperti font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ berharga beberapa kata dan menghemat banyak konversi bagi pembaca berikutnya.
Simpan lebar desain di satu tempat
Jika proyek Anda punya properti kustom untuk lebar tempat desain digambar, setiap nilai vw dapat dilacak kepadanya. Ketika Anda mengonversi vw ke px untuk sebuah tinjauan, Anda tahu lebar mana yang dipakai.
Pakai vw secukupnya
Daftar pendek nilai vw mudah dinalar. Stylesheet yang semuanya dalam vw tidak. Simpan untuk huruf tampilan, celah besar, dan karya seni.
Uji dengan perangkat nyata bila penting
Alat browser mensimulasikan lebar dengan baik, tetapi ponsel nyata menunjukkan perilaku sebenarnya bilah alamat, rotasi, dan zoom. Pemeriksaan lima menit pada perangkat menangkap apa yang terlewat oleh simulasi.
Konverter terkait
Keluarga alat yang sama mencakup konversi bertetangga. Untuk kembali ke vw, pakai px ke vw. Untuk ukuran relatif terhadap akar, ada px ke rem dan rem ke px, dan untuk ukuran relatif terhadap elemen, px ke em dan em ke px. Untuk warna dari stylesheet yang sama, HEX ke RGB dan RGB ke HEX menangani notasinya.
Contoh terolah
Katakanlah penguji melaporkan bahwa judul hero sulit dibaca di ponsel kecil. Stylesheet menulis font-size: 5.2vw tanpa batas. Anda mengonversi vw ke px pada 360 dan membaca 18,7 px, pada 768 membaca 39,9 px, pada 1440 membaca 74,9 px. Di ujung sempit judul sedikit lebih besar daripada teks isi dan tak lagi terbaca sebagai judul. Anda menyarankan clamp(2rem, 1rem + 4vw, 5rem), yang memberi 32 px pada yang tersempit, sekitar 51 px pada 768, dan 5rem, 80 px, pada yang terlebar. Penguji mengonfirmasi bahwa kini terbaca dengan baik, dan judul tetap berskala.
Daftar periksa singkat
Sebelum mengonversi
Pilih lebar yang Anda pedulikan, dari alat pengembang atau dari daftar perangkat target Anda.
Saat mengonversi
Ketik nilai vw dan setiap lebar secara bergantian, dan catat piksel yang ditampilkan di samping dasarnya.
Setelah mengonversi
Lihat ekstremnya. Jika ukuran terlalu kecil atau terlalu besar di salah satu ujung, tambahkan batas dengan clamp().
Kesalahan umum
Mengira hanya ada satu jawaban
Nilai vw punya ukuran piksel berbeda pada setiap lebar. Sebutkan lebar bersama setiap angka.
Melupakan scrollbar
100vw mencakupnya, jadi kotak selebar penuh bisa meluap.
Mengukur teks isi hanya dalam vw
Ia tidak dapat diperbesar. Tambahkan suku rem dan batas.
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 untuk dibuat. Itulah cara lugas untuk mengonversi vw ke px.
Ringkasan
Untuk mengonversi vw ke px di sini, ketik ukuran dalam vw dan lebar jendela, lalu baca hasilnya dalam piksel seketika, memakai rumus px = vw × lebar ÷ 100. Lebar dimulai pada 1440 px, lebar yang sering dipakai untuk menggambar desain, tetapi itu kebiasaan dan bukan standar, jadi ketik milik Anda sendiri. Konversi mempertahankan bagian dari layar: satu vw adalah seperseratus lebar viewport, jadi ukuran dalam vw tumbuh dan menyusut bersama jendela. Tidak seperti rem, vw tidak punya bawaan, karena viewport hanyalah selebar jendela pembaca. Untuk teks, gabungkan vw dengan rem di dalam clamp(), agar tetap terbaca dan dapat diperbesar. Tidak ada yang diunggah.