Konversi px ke vw Pixels ↔ Viewport width Gratis Daring Aman
Ketik sebuah nilai dalam px dan bacalah langsung dalam vw. 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 px ke vw
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
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 konversi px ke vw
Seorang desainer mengirim mockup yang digambar selebar 1440 px, dengan judul hero 96 px dan celah bagian 72 px. Di web sungguhan halaman akan dilihat pada 360 px di ponsel, 820 px di tablet, dan 2560 px di monitor besar, dan desainer ingin judul mempertahankan proporsinya terhadap layar pada masing-masing. Satuan yang dibuat untuk itu adalah lebar viewport, vw, dan cara menuju ke sana dari mockup adalah konversi px ke vw: Anda mengambil nilai piksel, membaginya dengan lebar tempat desain digambar, dan mengalikan dengan seratus. Judul 96 px pada kanvas 1440 px adalah 6,67 vw, dan sejak itu ia selalu 6,67 persen dari apa pun layarnya.
Itulah janji satuan viewport, dan juga risikonya. Rem dan em dimulai dari ukuran font, yang diatur browser pada bawaan yang masuk akal. Vw sama sekali tak punya bawaan: lebar viewport sekadar seberapa lebar jendela pembaca, dan ia berubah ketika mereka memutar ponsel atau menyeret jendela. Jadi konverter tidak menyembunyikan satu angka yang menjadi sandaran jawabannya. Lebar desain berada di kolom, dimulai pada 1440 px, dan Anda dapat mengubahnya agar cocok dengan mockup Anda.
Aritmetika berjalan di browser Anda dan tidak ada yang diunggah. Di bawah Anda akan menemukan rumusnya, apa yang dipertahankan dan tak dapat dipertahankan konversi, di mana satuan viewport membantu dan di mana merugikan, masalah aksesibilitas yang diciptakan teks vw murni, teknik clamp yang memperbaikinya, dan metode untuk mengubah mockup piksel menjadi lembar gaya cair.
Rumus dan lebar
vw sama dengan px dibagi lebar, kali seratus
Rumusnya vw = px ÷ lebar × 100. Dengan lebar desain 1440 px, ukuran 144 px menjadi 10 vw, 72 px menjadi 5 vw, dan 24 px menjadi 1,667 vw. Halaman menunjukkan lebar di samping hasil, seperti pada 144 px = 10 vw (1440 px), jadi Anda dapat melihat apa yang diasumsikan. Satu vw adalah satu per seratus lebar viewport, jadi jendela selebar 1000 px punya 1 vw sama dengan 10 px.
Dari mana angka 1440 berasal
1440 px di sini adalah lebar yang sering dipakai desain digambar, kebiasaan dan bukan standar. Sebagian tim menggambar pada 1280, banyak pada 1920, dan desain seluler pada 375 atau 390. Tidak ada jawaban yang benar, hanya lebar yang dipakai berkas desain Anda. Ketik milik Anda sendiri: konversi hanya sebaik lebar yang Anda berikan.
Memakai lebar desain sendiri
Jika mockup digambar pada 1920 px, ketik 1920, dan judul 96 px yang sama menjadi 5 vw. Jika Anda konversi px ke vw memakai lebar yang salah, halaman akan tampak benar pada satu ukuran layar dan salah pada semua yang lain, galat yang membingungkan ketika Anda tak tahu untuk mencarinya.
Apa yang dipertahankan konversi dan apa yang tidak bisa
Ia mempertahankan bagian layar
Satu vw adalah satu per seratus lebar viewport, jadi ukuran yang ditulis dalam vw tumbuh dan menyusut bersama jendela alih-alih diam di tempat. Hasilnya adalah bagian layar yang ditempati nilai piksel dalam mockup Anda, dan di browser elemen mempertahankan bagian itu pada setiap lebar.
Ia tak dapat memberi bawaan
Tidak seperti rem, vw tak punya bawaan. Browser memberi ukuran font akar 16 px ketika tak seorang pun menyatakan lain, jadi halaman rem dapat mulai dari angka nyata; lebar viewport sekadar seberapa lebar jendela pembaca, dan ia berubah ketika mereka memutar ponsel. Lebar di kolom adalah lebar desain Anda, dan jawabannya benar untuk layar selebar itu dan proporsional di tempat lain.
Pembulatan
Membagi dengan 1440 menghasilkan desimal panjang untuk sebagian besar ukuran. Nilai seperti 6,6667 vw tidak masalah dalam lembar gaya, tetapi Anda dapat membulatkan ke 6,67 atau 6,7 tanpa perubahan yang terlihat. Pertahankan dua atau tiga digit setelah koma; lebih dari itu derau.
Di mana satuan viewport membantu
Judul hero dan huruf tampilan besar
Judul yang harus memenuhi bagian tertentu layar pada setiap perangkat adalah pemakaian klasik. Pada lebar ponsel judul tetap 96 px akan meluap; dalam vw ia menyusut bersama layar dan tetap pada satu baris.
Bagian lebar penuh
Jarak antarbagian besar halaman pendaratan sering tampak terbaik ketika menskalakan bersama layar, agar halaman mempertahankan iramanya di laptop kecil dan di layar lebar. Celah dalam vw melakukannya.
Karya yang harus mempertahankan bentuknya
Gambar hero, ilustrasi, dan bentuk dekoratif yang berukuran vw mempertahankan proporsinya terhadap jendela, jadi komposisi tidak berantakan ketika layar berubah.
Huruf cair dengan batas
Digabung dengan clamp(), vw memberi huruf yang tumbuh mulus antara minimum dan maksimum. Ini teknik yang dipakai lembar gaya modern untuk judul, dan dibahas di bawah.
Di mana satuan viewport merugikan
Teks isi dalam vw murni
Teks yang berukuran hanya dalam vw tidak menanggapi ketika pembaca memperbesar halaman di browser, karena pembesaran mengubah ukuran piksel jendela tetapi ukuran vw mempertahankan bagiannya darinya. Orang yang mengandalkan pembesaran, sering karena penglihatan lemah, dibiarkan dengan teks yang tak dapat mereka perbesar. Pedoman aksesibilitas meminta teks dapat diubah ukurannya, dan ukuran vw murni gagal dalam uji itu.
Ekstrem kecil dan raksasa
Pada lebar 320 px judul 6,67 vw adalah 21 px, yang mungkin terlalu kecil. Pada lebar 2560 px ia 171 px, yang sangat besar. Tanpa batas, proporsi yang tampak benar pada 1440 bisa absurd di ujung-ujungnya.
Bilah gulir
Pada browser desktop, lebar viewport yang dipakai untuk vw mencakup lebar bilah gulir vertikal. Kotak yang diatur ke 100vw karena itu sedikit lebih lebar daripada area yang terlihat ketika halaman menggulir, dan bilah gulir horizontal dapat muncul. Ketahui ini sebelum Anda membangun tata letak lebar penuh dari vw.
Teknik clamp
Menetapkan lantai dan langit-langit
Fungsi CSS clamp(min, preferred, max) menerima minimum, nilai pilihan, dan maksimum. Untuk huruf, tulis minimum dan maksimum dalam rem, dan nilai pilihan dalam vw ditambah suku rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). Ukuran tumbuh bersama jendela antara 32 dan 96 px dan tak pernah melampaui kedua ujung. Karena sebagian dalam rem, teks tetap menghormati pengaturan pembaca.
Cara membangun suku tengah
Pilih dua lebar layar dan ukuran yang Anda inginkan pada masing-masing. Misalnya 32 px pada lebar 360 px dan 96 px pada lebar 1440 px. Kemiringannya (96 − 32) ÷ (1440 − 360) = 0,0593 px per px lebar, yaitu 5,93 vw, dan perpotongannya 32 − 0,0593 × 360 = 10,67 px, sekitar 0,667 rem. Suku pilihannya karena itu 0,667rem + 5,93vw. Konverter membantu bagian vw, dan semenit aritmetika mengerjakan sisanya.
Mengapa ini keseimbangan yang tepat
Dengan clamp, Anda mendapat perilaku cair yang diinginkan desainer dan aksesibilitas yang diperlukan pembaca. Ia jawaban atas masalah yang dijelaskan di atas, dan alasan sebagian besar lembar gaya modern memakai vw hanya di dalam clamp.
Cara konversi px ke vw di sini
Ketik nilai piksel
Masukkan ukuran dalam piksel di kolom pertama. Desimal diterima.
Atur lebar desain
Biarkan pada 1440 jika itu lebar mockup Anda. Ubah jika bukan. Hasilnya diperbarui saat Anda mengetik.
Salin nilai vw
Pakai angka dalam CSS Anda dengan satuannya, seperti pada font-size: 6.67vw. Untuk teks, taruh di dalam clamp() bersama batas dalam rem.
Dari mana satuan ini berasal
Piksel CSS
Ketika layar berhenti punya kepadatan yang dapat diprediksi, halaman yang diukur dalam piksel nyata menjadi halaman yang menyusut seiring layar makin tajam. Jadi piksel CSS didefinisikan ulang sebagai panjang acuan: sekitar 1/96 inci yang dilihat pada jarak baca yang nyaman. Itulah satuan tempat mockup Anda digambar.
Satuan viewport
Vw datang bersama desain responsif: satu per seratus lebar viewport, apa pun hasilnya. Ia berdampingan dengan rem, yang relatif terhadap ukuran font akar, dan em, yang relatif terhadap elemen. Jika Anda memerlukan ukuran relatif terhadap teks dan bukan layar, konversi px ke rem.
Jebakan saat Anda konversi px ke vw
Memakai lebar desain yang salah
Kekeliruan paling umum. Jika mockup Anda selebar 1920 dan Anda mengonversi dengan 1440, setiap ukuran meleset sepertiga. Pastikan lebar bingkai di alat desain Anda.
Melupakan desain seluler
Banyak tim punya dua mockup, satu untuk desktop dan satu untuk ponsel. Judul yang 96 px pada yang pertama dan 40 px pada yang kedua bukan satu nilai vw. Pakai dua lebar, dua konversi, dan clamp untuk menyambungnya.
Menaruh seluruh halaman dalam vw
Halaman tempat segalanya menskalakan bersama jendela kehilangan rasa membacanya: baris menjadi terlalu panjang di layar lebar dan teks terlalu kecil di layar sempit. Pakai vw untuk beberapa hal yang harus diskalakan, dan ukuran tetap atau rem untuk sisanya.
Mengabaikan masalah pembesaran
Uji halaman Anda dengan browser diperbesar hingga 200 persen. Jika teks tidak tumbuh, ukuran memerlukan suku rem.
Pertanyaan yang diajukan orang sebelum mengonversi
Berapa vw 100 px?
Pada lebar desain 1440 px, sekitar 6,94 vw.
Apa lebar desain terbaik untuk dipakai?
Yang dipakai mockup Anda digambar. Tidak ada bawaan universal.
Apakah vw lebih baik daripada rem?
Mereka mengerjakan tugas berbeda. Rem mengikuti ukuran teks pembaca; vw mengikuti jendela. Pakai masing-masing untuk apa yang baik baginya.
Bisakah saya memakai vw untuk ukuran font?
Ya, tetapi taruh di dalam clamp() dengan batas dalam rem, agar teks tetap terbaca dan masih dapat diperbesar.
Apakah angka saya diunggah?
Tidak. Aritmetika berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan vw ke px, yang mengalikan dengan lebar alih-alih membagi.
Memilih dengan bijak saat konversi px ke vw
Putuskan apa yang harus diskalakan bersama layar
Huruf hero, celah besar, dan karya: ya. Teks isi, batas, kontrol kecil: tidak. Semakin pendek daftar nilai vw Anda, semakin kokoh halamannya.
Konversi pada tahap desain
Jika Anda konversi px ke vw sambil membaca mockup, Anda dapat langsung melihat nilai mana yang keluar ganjil dan meminta desainer yang lebih rapi. Judul yang ternyata 6,6667 vw mengundang percakapan tentang menjadikannya 6,5 atau 7.
Simpan catatan lebarnya
Tulis lebar desain dalam komentar di bagian atas lembar gaya, agar siapa pun yang mengonversi kelak memakai yang sama. Lebar campuran menghasilkan halaman yang tak konsisten dengan cara yang tak dapat dijelaskan siapa pun.
Bekerja dari mockup ke lembar gaya cair
Daftar ukuran yang harus diskalakan
Buka berkas desain dan tuliskan setiap ukuran yang Anda inginkan mengikuti layar: judul hero, celah bagian, mungkin ilustrasi besar. Untuk masing-masing, konversi px ke vw terhadap lebar bingkai, dan catat hasilnya. Sebagian besar halaman berakhir dengan kurang dari sepuluh nilai seperti itu, dan segala yang lain tetap dalam rem atau piksel.
Periksa bingkai seluler secara terpisah
Jika ada mockup ponsel, baca elemen yang sama pada lebarnya. Judul 96 px pada bingkai 1440 px dan 40 px pada bingkai 375 px tidak cocok dengan satu nilai vw, yang merupakan tanda untuk memakai clamp: ukuran ponsel menjadi lantai, ukuran desktop menjadi langit-langit, dan suku vw mengerjakan bagian di antaranya. Ketika Anda konversi px ke vw untuk setiap bingkai, kedua angka menentukan kemiringan.
Tinjau pada tiga lebar
Lihat halaman jadi pada kira-kira 360, 820, dan 1440 piksel, dan sekali pada 2560. Tata letak cair mudah dibuat benar pada lebar mockup dan sedikit salah di tempat lain, dan lintasan singkat melalui lebar-lebar ini menemukan sebagian besar masalah sebelum pengunjung menemukannya.
Jauhkan satuan dari teks panjang
Baris teks bacaan paling baik berukuran rem, dan diberi panjang baris maksimum sekitar 60 hingga 75 karakter. Pakai satuan viewport untuk huruf tampilan dan jarak, dan biarkan teks bacaan stabil.
Konverter terkait
Keluarga alat yang sama mencakup konversi di sekitarnya. Untuk kembali ke piksel, pakai vw ke px. 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 pada lembar gaya yang sama, HEX ke RGB dan HEX ke HSL menangani notasinya.
Contoh hitungan
Katakanlah halaman pendaratan dirancang pada 1440 px, dengan judul hero 96 px dan celah 72 px di atasnya. Anda mengetik 96 dan membaca 6,667 vw, mengetik 72 dan membaca 5 vw. Pada jendela 1000 px judulnya 66,7 px dan celahnya 50 px, proporsional. Tetapi pada ponsel selebar 360 px judul akan 24 px, yang lebih kecil daripada yang Anda inginkan, jadi Anda menulis judul sebagai clamp(2.25rem, 1rem + 5vw, 6rem), memberi lantai 36 px dan langit-langit 96 px, dan ia tetap terbaca dan dapat diperbesar. Celah, yang tak punya teks, tetap dalam vw biasa.
Daftar periksa singkat
Sebelum mengonversi
Temukan lebar mockup. Putuskan ukuran mana yang harus diskalakan dan mana yang tidak.
Saat mengonversi
Ketik nilai piksel dan lebar desain, dan salin angka vw dengan satuannya.
Setelah mengonversi
Ubah ukuran jendela dari lebar ponsel ke monitor lebar, dan perbesar halaman hingga 200 persen. Tambahkan batas dengan clamp() di mana pun ekstremnya tampak salah.
Kesalahan umum
Mengira 1440 adalah standar
Itu hanya kebiasaan. Pakai lebar Anda sendiri.
Mengukur teks isi dalam vw saja
Ia tak dapat diperbesar. Tambahkan suku rem dan batas.
Melupakan bilah gulir
100vw lebih lebar daripada area yang terlihat pada halaman desktop yang menggulir.
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 yang perlu dibuat. Itulah cara sederhana untuk konversi px ke vw.
Ringkasan
Untuk konversi px ke vw di sini, ketik ukuran dalam piksel dan lebar desain Anda, dan baca hasilnya seketika, memakai rumus vw = px ÷ lebar × 100. Lebar dimulai pada 1440 px, lebar yang sering dipakai desain digambar, tetapi itu kebiasaan dan bukan standar, jadi ketik milik Anda sendiri. Konversi mempertahankan bagian layar: satu vw adalah satu per seratus lebar viewport, jadi ukuran dalam vw tumbuh dan menyusut bersama jendela. Tidak seperti rem, vw tak punya bawaan, karena viewport adalah seberapa lebar jendela pembaca. Untuk teks, gabungkan vw dengan rem di dalam clamp(), agar tetap terbaca dan dapat diperbesar. Tidak ada yang diunggah.