vw birimini px birimine çevirin Viewport width ↔ Pixels Ücretsiz Çevrimiçi Güvenli
vw cinsinden bir değer yazın, karşılığını hemen px cinsinden okuyun. Hesap tarayıcınızda yapılır, hiçbir yere bir şey gönderilmez ve sonucun neye bağlı olduğu varsayılmak yerine aşağıda yazılıdır.
Hiçbir şey yüklenmez
Alışılmış boyutlar — vw birimini px birimine çevirin
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
Bu birimler nereden geliyor
CSS'teki piksel, ekranınızdaki piksel değildir. Ekranların yoğunluğu öngörülebilir olmaktan çıkınca, gerçek piksellerle ölçülmüş bir sayfa, ekranlar keskinleştikçe küçülen bir sayfaya dönüştü; bu yüzden CSS pikseli bir referans uzunluk olarak yeniden tanımlandı: rahat bir okuma mesafesinden görülen, inçin yaklaşık 1/96'sı. Bu sayfadaki her şey bunun üzerine kuruludur. Em, web'den eskidir — kurşun dizgide dökülmüş bir bloğun genişliğiydi, adını büyük M harfinden alır — ve CSS'te yürürlükteki yazı boyu demektir; öğeleri iç içe geçirdikçe değişmesinin sebebi budur. Rem tam da bundan kaçmak için eklendi: kök öğenin em'idir ve asla birikmez. Vw, duyarlı tasarımla geldi: görüntü alanının genişliğinin yüzde biri, o genişlik ne çıkarsa.
Onlarla nerede karşılaşırsınız
Bunlar her stil sayfasının birimleridir. Piksel kenarlıkları, gölgeleri ve ölçeklenmemesi gereken her şeyi boyutlandırır; rem yazıyı, boşlukları ve yerleşimi boyutlandırır, böylece kökteki tek bir değişiklik bütün bir arayüzü yeniden ölçekler; em kendi metnini izlemesi gereken şeyleri boyutlandırır, bir düğmenin iç boşluğu gibi; vw ise her aygıtta ekranı doldurması gereken başlıkları ve açılış bölümlerini. Aralarında çevirmek, piksellerle teslim edilmiş bir tasarımı ölçeklenen bir stil sayfasına dönüştürmenin günlük aritmetiğidir.
Sık sorulan sorular
Neden alışılmış başlangıç noktası 16 px?
Çünkü bütün büyük tarayıcılarda varsayılan metin boyu budur ve bunu geçersiz kılmayan bir stil sayfası onu devralır. Dolayısıyla varsayılan ayarda bir rem 16 px eder; tanıdık çevrimler buradan gelir: 0,5 rem 8 px, 1,5 rem 24 px. Bir kullanıcı tarayıcı ayarlarından varsayılanı büyütmüşse, aynı rem değerleri de onunla birlikte büyür — onları kullanmanın anlamı tam olarak budur.
rem mi kullanmalıyım, em mi?
Sayfanın bütününü izlemesi gereken her şey için rem — yazı ölçeği, boşluklar, yerleşim genişlikleri — çünkü kökten ölçülür ve asla birikmez. İçinde durduğu metni izlemesi gereken her şey için em: bir düğmenin iç boşluğu, bir simgenin yanındaki aralık, bir alıntının girintisi. Yaygın hata, em ile boyutlandırılmış öğeleri iç içe geçirmektir: 1,2 em içindeki 1,2 em 1,44 olur, sonra 1,73, derken sayfanın altındaki metin tasarlanandan iki kat büyük çıkar.
Sonuç kesin mi?
İki birim birbirinden tam sayılarla tanımlanıyorsa evet — sayfa bunu rakamın üstünde söyler ve tek yuvarlama kaç basamak gösterildiğindedir. Oranın sonlu bir ondalığı yoksa sayfa on iki anlamlı basamak gösterir ve ilişkinin yaklaşık olduğunu söyler, başka türlüymüş gibi yapmaz.
Yazdıklarım cihazımdan çıkıyor mu?
Hayır. Hesap tarayıcınızda yapılır; hiçbir şey yüklenmez, zaten yükleyecek bir sunucu da yok. Sayfa bir kez açıldıktan sonra ağ kapalıyken de çalışır.
vw'yi neden px'e çevirirsiniz
Bir stil sayfası bir kahraman başlıkta font-size: 5.2vw, bir bölümde margin-top: 8vw ve bir resimde width: 42vw der. Bunlar esnek değerlerdir ve ekranda ne olduğunu söylemezler. Başlık bir telefonda ne kadar büyük? Resim bir dizüstünde ne kadar geniş? Kenar boşluğu 1920 pikselde doğru görünüyor mu? Öğrenmek için vw'yi px'e çevirirsiniz: sayıyı pencerenin genişliğiyle çarpar ve yüze bölersiniz ve cevabı tasarımcıların, test edenlerin ve müşterilerin kullandığı birimde okursunuz. Akışkan kodu incelerken, bir derlemeyi bir maketle karşılaştırırken ya da bir meslektaşınıza başlığın dar bir ekranda neden küçük göründüğünü açıklarken yaptığınız şey budur.
Dönüşümü rem ya da em'den farklı kılan şey, çarpanın pencerenin kendisi olmasıdır. Bir vw görünüm alanı genişliğinin yüzde biridir; bu yüzden 5,2vw, 1000 px genişliğinde bir pencerede 52 px, 360 px genişliğinde bir telefonda 18,7 px ve 1920'lik geniş bir monitörde 99,8 px eder. Başvurulacak bir varsayılan yoktur ve okuyucu telefonu döndürdüğünde ya da pencereyi sürüklediğinde genişlik değişir. Dönüştürücü bu yüzden genişliği sorar, cevabın yanında gösterir ve tasarımların sıkça çizildiği bir genişlik olan 1440 px'ten başlar.
Hesap tarayıcınızda yapılır ve hiçbir şey yüklenmez. Aşağıda formülü, dönüşümün neyi koruyup neyi koruyamadığını, bir akışkan stil sayfasının birkaç genişlikte nasıl okunacağını, kaydırma çubuğunun tuzağını, saf vw içindeki metnin erişilebilirlik sorununu ve akışkan kodu anlaşılır tutan birkaç alışkanlığı bulacaksınız.
Formül ve genişlik
px, vw çarpı genişlik bölü yüze eşittir
Formül px = vw × genişlik ÷ 100'dür. 1440 px genişlikte 10 vw, 144 px; 5 vw, 72 px ve 1,667 vw, 24 px olur. Sayfa genişliği sonucun yanında yazdırır; bu yüzden 10 vw = 144 px (1440 px) gibi bir satır neyin varsayıldığını söyler. Başka bir ekranı görmek için genişliği değiştirin ve sonucu yeniden okuyun.
Hangi genişlikleri denemeli
Kontrol etmek için yararlı bir küme telefonlar için 360 ya da 390, dikey bir tablet için 768, küçük bir dizüstü için 1024, tipik bir dizüstü ya da masaüstü için 1440 ve tam HD bir monitör için 1920'dir. Her birini genişlik alanına yazın ve sonucu not edin. Beş okuma bir değerin bütün aralığını gösterir ve her uç değer göze çarpar.
Gerçek pencerenin genişliğini kullanmak
Tarayıcınızın geliştirici araçlarında aygıt araç çubuğu pencerenin genişliğini piksel olarak gösterir. Sayfanın ne yaptığını dönüştürücünün söylediğiyle karşılaştırmak için o sayıyı kullanın. Uyuşuyorlarsa stil sayfasını doğru okumuşsunuz demektir.
Dönüşümün koruduğu ve koruyamadığı
Ekranın payını korur
Bir vw görünüm alanı genişliğinin yüzde biridir; bu yüzden vw ile yazılmış bir boyut yerinde durmak yerine pencereyle büyür ve küçülür. Elde ettiğiniz piksel değeri o payın belirli bir genişlik için somutlaştırılmış halidir.
Bir varsayılan veremez
rem'in aksine vw'nin bir varsayılanı yoktur. Bir tarayıcı kimse aksini söylemediğinde kök yazı tipi boyutuna 16 px verir; bu yüzden bir rem sayfası gerçek bir sayıdan başlayabilir; görünüm alanı genişliği ise okuyucunun penceresi ne kadar genişse odur ve telefonu çevirdiklerinde değişir. Buradaki 1440 px tasarımların sıkça çizildiği bir genişliktir, bir alışkanlık, bir standart değil. Kendinizinkini yazın.
Yuvarlama
Genişlikle çarpıp 100'e bölmek ondalıklar üretebilir. 1440 px'te 6,67 vw, 96,048 px'tir. Tarayıcılar kesirli pikselleri işler, ama bir tasarım dosyası için tam sayıya ihtiyacınız varsa yuvarlayın ve yuvarlamanın sizin olduğunu not edin.
Akışkan bir stil sayfasını okumak
Üç genişlik alın ve sonuçları yazın
Dar, orta ve geniş bir genişlik seçin, örneğin 375, 1024 ve 1920. Stil sayfasındaki her önemli vw değeri için her genişlikte vw'yi px'e çevirin ve üç sayıyı bir nota yazın. 5,2 vw'lik bir başlık 19,5, 53,2 ve 99,8 piksel verir. Böyle görülünce başlığın dar uçta okunabilir ve geniş uçta bunaltıcı olmadığını bilirsiniz.
clamp'e bakın
İyi yazılmış akışkan kod, vw'nin çevresine clamp(min, tercih edilen, maks) ile sınırlar koyar. clamp(2rem, 1rem + 4vw, 6rem) görürseniz boyut 32 ile 96 px arasında büyür ve her iki uçta sabit kalır. vw kısmını çevirdiğinizde bunun aralığın yalnızca ortası olduğunu ve uçlarda ne olacağına sınırların karar verdiğini unutmayın.
Uç değerleri kontrol edin
Riskli genişlikler en küçük ve en büyüktür. 320 px'te 6 vw'lik bir başlık 19 px'tir; 2560'ta 154 px'tir. İkisi de kabul edilebilir görünmüyorsa ve clamp yoksa stil sayfasının sınırlara ihtiyacı vardır.
vw'yi px'e çevirirken tuzaklar
Kaydırma çubuğu
Masaüstü tarayıcılarında vw için kullanılan görünüm alanı genişliği dikey kaydırma çubuğunun genişliğini içerir. Bu yüzden 100vw, sayfa kaydığında görünen alandan, birçok sistemde yaklaşık 15 ile 17 piksel kadar biraz daha geniştir. Hesapladığınız piksel değeri bu yüzden temsil ediyor göründüğü görünür genişlikten biraz büyüktür. Kaydırma çubuklarının sayfanın üzerine bindiği telefonlarda etki yoktur.
Yanlış genişliği kullanmak
Sonuç yalnızca yazdığınız genişlik kadar doğrudur. Test pencereniz 1366 px genişliğindeyse ve 1440'ta çeviriyorsanız her değer yaklaşık yüzde beş sapar. Gerçek genişliği geliştirici araçlarından okuyun.
vw'yi yüzdeyle karıştırmak
%50'lik bir genişlik ebeveynin genişliğine, 50vw ise pencereye atıfta bulunur. Dar bir kapsayıcının içinde ikisi çok farklıdır. Dönüştürücü vw cevabını verir; öğeniz bir kapsayıcının içindeyse ebeveyn pencereden dar olabilir.
vw ile metnin yakınlaştırılamayacağını unutmak
Yalnızca vw ile boyutlandırılmış metin okuyucu sayfayı yakınlaştırdığında tepki vermez, çünkü pencere ve metin birlikte ölçeklenir. Erişilebilirlik yönergeleri metnin yeniden boyutlandırılabilmesini ister. clamp()'deki gibi bir rem terimi ekleyin; böylece metin yakınlaştırmaya da tepki verir.
Dönüştürmeden önce insanların sorduğu sorular
1 vw kaç pikseldir?
Pencere genişliğinin yüzde biri: 1440'ta 14,4 px, 1000'de 10 px, 360'ta 3,6 px.
50 vw kaç pikseldir?
Pencerenin yarısı: 1440 genişlikte 720 px, 1000 genişlikte 500 px.
Sayfam neden ekrandan geniş?
Kayan bir sayfadaki 100vw'lik bir kutu, kaydırma çubuğu sayıldığı için görünür alandan geniştir. Bunun yerine bir kapsayıcının içinde %100 kullanın.
vw yüzdeyle aynı mı?
Hayır. Yüzde ebeveyne, vw pencereye atıfta bulunur.
Sayım yükleniyor mu?
Hayır. Aritmetik tarayıcınızda çalışır ve hiçbir yere hiçbir şey gönderilmez.
Nasıl geri dönerim?
Çarpmak yerine genişliğe bölen px'ten vw'ye ile.
Yaygın genişliklerde yaygın değerler
Zihinden bir tablo
Dönüştürücüyü kullanmadan önce tahmin edebilmeniz için birkaç çapa bilmek yardımcı olur. 1000 px genişlikte 1 vw 10 px'tir; bu da aritmetiği önemsiz kılar: 2,5 vw 25 px, 8 vw 80 px. 1440 px'te 1 vw 14,4 px'tir. 375 px'te 1 vw 3,75 px'tir; bu yüzden 8 vw'lik bir başlık 30 px'tir. Hızlı bir kontrol için vw'yi px'e çevirdiğinizde bu çapalardan birinden başlayın ve ölçeklendirin.
Üç genişlik, bir stil sayfası
Genişliği 80vw, boşluğu 4vw ve başlığı 6vw olan bir kart alın. 375 px'lik bir telefonda 300 px, 15 px ve 22,5 px eder. 768 px'lik bir tablette 614 px, 30,7 px ve 46 px. 1440 px'lik bir masaüstünde 1152 px, 57,6 px ve 86,4 px. Üçünü yan yana görmek size kartın masaüstünde çok geniş ve başlığın çok büyük olduğunu ve muhtemelen bir azami genişlik ile bir clamp istediğinizi hemen söyler.
Görünüm alanının ötesi
Kapsayıcı birimleri
Daha yeni CSS pencere yerine bir kapsayıcıya göre göreli birimler sunar; örneğin kapsayıcının genişliğinin yüzde biri olan cqw. Dar bir kenar çubuğuna yerleştirilmiş bir bileşenin bütün pencereye sahipmiş gibi davranması sorununu çözerler. Onları kullanırsanız aritmetik vw ile aynıdır, taban olarak kapsayıcının genişliğiyle; ve bu dönüştürücüyü o genişliği yazarak kullanabilirsiniz.
Küçük, büyük ve dinamik görünüm alanları
Telefonlarda adres çubuğu kayıp gittikçe görünen alan değişir. Yükseklikler için daha yeni svh, lvh ve dvh birimleri küçük, büyük ve dinamik görünüm alanını tarif eder. Genişlikler için durum daha basittir, çünkü adres çubuğu onu etkilemez ve vw kararlıdır. Bu, mobilde akışkan tasarım için vw'nin vh'den neden daha güvenli bir birim olduğunun bir nedeni daha.
Yüzde, vw ve ızgara
Yüzde genişlikler ebeveyni, vw pencereyi ve CSS grid ile flexbox kullanılabilir alanı izler. En iyi akışkan düzenler çoğu zaman yapı için grid ve yüzdeleri, vw'yi yalnızca yazı ve boşluk için kullanır, çünkü doğrudan ekranı izlemekten yararlanan şeyler onlardır. Bir düzeni kontrol etmek için vw'yi px'e çevirdiğinizde bir grid izinin aynı şeyi daha sağlam söyleyip söylemeyeceğini sorun.
vw'yi CSS yazmayan insanlara anlatmak
Cetvel olarak pencereyi kullanın
Müşteriler ve meslektaşlar genellikle bir vw'nin ekran genişliğinin yüzde biri olduğunu söylediğinizde fikri anlar. 5 vw'lik bir başlık ekranın yüzde beşi genişliğindedir. Sonra onlara iki sayı gösterin: kendi telefonlarında ve toplantı odasındaki büyük monitörde ne ettiği. Her iki genişlik için vw'yi px'e çevirip sonuçları yüksek sesle söylediğinizde ekranla birlikte hareket eden bir boyut fikri somut hale gelir.
Tasarımın neden sabit olmadığını söyleyin
Teknik olmayan paydaşlar bazen sayfanın başlık için neden basitçe tek bir boyutu olmadığını sorar. Cevap, ekranların en küçük telefon ile en büyük monitör arasında yedi sekiz kat farklı olması ve birine uyan sabit bir boyutun ötekine yanlış gelmesidir. Akışkan birimler cevaptır ve bu sayfadaki piksel rakamları ekranın aynı değeri ne kadar değiştirdiğini gösterir.
Bu birimler nereden geliyor
CSS pikseli
Ekranlar öngörülebilir bir yoğunluğa sahip olmayı bıraktığında gerçek piksellerle ölçülen bir sayfa, ekranlar keskinleştikçe küçülen bir sayfa oldu. Bu yüzden CSS pikseli bir referans uzunluk olarak yeniden tanımlandı: rahat bir okuma mesafesinden görülen bir inçin yaklaşık 1/96'sı. Bu sayfanın cevaplarını verdiği birimdir.
Görünüm alanı birimleri
vw duyarlı tasarımla geldi: ne çıkarsa çıksın görünüm alanının genişliğinin yüzde biri. Kök yazı tipi boyutuna göre göreli rem'in ve öğeye göre göreli em'in yanında durur. Aynı piksel değerinin o birimlerde nasıl göründüğünü görmek için rem'den px'e çevirin ve karşılaştırın.
Akışkan kodu anlaşılır tutan alışkanlıklar
Piksel değerlerini yorumlayın
font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ gibi bir satır birkaç sözcüğe mal olur ve sonraki okuyucuyu birkaç dönüşümden kurtarır.
Tasarım genişliğini tek yerde tutun
Projenizde tasarımın çizildiği genişlik için özel bir özellik varsa her vw değeri ona kadar izlenebilir. Bir inceleme için vw'yi px'e çevirdiğinizde hangi genişliği kullanacağınızı bilirsiniz.
vw'yi az kullanın
Kısa bir vw değerleri listesi hakkında akıl yürütmek kolaydır. Her şeyin vw olduğu bir stil sayfası değildir. Onu gösteri yazısı, büyük boşluklar ve sanat çalışması için saklayın.
Önemli olduğunda gerçek aygıtlarla test edin
Tarayıcı araçları genişlikleri iyi simüle eder, ama gerçek bir telefon adres çubuklarının, döndürmenin ve yakınlaştırmanın gerçek davranışını gösterir. Bir aygıtta beş dakikalık bir kontrol bir simülasyonun kaçırdığını yakalar.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri kapsar. vw'ye geri dönmek için px'ten vw'ye kullanın. Köke göre göreli boyutlar için px'ten rem'e ve rem'den px'e, öğeye göre göreli boyutlar için px'ten em'e ve em'den px'e var. Aynı stil sayfasının renkleri için HEX'ten RGB'ye ve RGB'den HEX'e gösterimleri halleder.
Çözümlü bir örnek
Diyelim ki bir test eden kahraman başlığın küçük bir telefonda okunmasının zor olduğunu bildiriyor. Stil sayfası sınırsız font-size: 5.2vw diyor. vw'yi px'e 360'ta çeviriyorsunuz ve 18,7 px okuyorsunuz, 768'de 39,9 px, 1440'ta 74,9 px. Dar uçta başlık gövde metninden biraz büyük ve artık bir başlık gibi okunmuyor. clamp(2rem, 1rem + 4vw, 5rem) öneriyorsunuz; bu en dar uçta 32 px, 768'de yaklaşık 51 px ve en geniş uçta 5rem, 80 px verir. Test eden artık iyi okunduğunu doğruluyor ve başlık hâlâ ölçekleniyor.
Kısa bir kontrol listesi
Dönüştürmeden önce
Önem verdiğiniz genişlikleri, geliştirici araçlarından ya da hedef aygıtlar listenizden seçin.
Dönüştürürken
vw değerini ve her genişliği sırayla yazın ve tabanın yanında gösterilen pikselleri not edin.
Dönüştürdükten sonra
Uç değerlere bakın. Bir boyut herhangi bir uçta çok küçük ya da çok büyükse clamp() ile sınırlar ekleyin.
Yaygın hatalar
Tek bir cevap varsaymak
Bir vw değerinin her genişlikte farklı bir piksel boyutu vardır. Her rakamla birlikte genişliği verin.
Kaydırma çubuğunu unutmak
100vw onu içerir; bu yüzden tam genişlikte bir kutu taşabilir.
Gövde metnini yalnızca vw ile boyutlandırmak
Yakınlaştırılamaz. Bir rem terimi ve sınırlar ekleyin.
Rakamlarınız cihazınızda kalır
Hesap yerel olarak yapılır. Değerleriniz kendi tarayıcınız tarafından kullanılır ve hiçbir yere hiçbir şey gönderilmez. Sonradan silinecek bir şey ve açılacak bir hesap yoktur. vw'yi px'e çevirmenin sade yolu budur.
Özet
Burada vw'yi px'e çevirmek için boyutu vw olarak ve pencerenin genişliğini yazın ve sonucu piksel olarak hemen okuyun; formül px = vw × genişlik ÷ 100'dür. Genişlik tasarımların sıkça çizildiği bir genişlik olan 1440 px'ten başlar, ama bu bir alışkanlıktır, bir standart değil; bu yüzden kendinizinkini yazın. Dönüşüm ekranın payını korur: bir vw görünüm alanı genişliğinin yüzde biridir; bu yüzden vw ile bir boyut pencereyle büyür ve küçülür. rem'in aksine vw'nin bir varsayılanı yoktur, çünkü görünüm alanı okuyucunun penceresi ne kadar genişse odur. Metin için vw'yi clamp() içinde rem ile birleştirin; böylece okunabilir ve yakınlaştırılabilir kalır. Hiçbir şey yüklenmez.