px birimini vw birimine çevirin Pixels ↔ Viewport width Ücretsiz Çevrimiçi Güvenli
px cinsinden bir değer yazın, karşılığını hemen vw 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 — px birimini vw birimine çevirin
| 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 |
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.
px'i neden vw'ye dönüştürürsünüz
Bir tasarımcı, 1440 px genişliğinde çizilmiş, 96 px'lik bir ana başlığı ve 72 px'lik bir bölüm aralığı olan bir maket gönderir. Gerçek web'de sayfa telefonda 360 px, tablette 820 px ve büyük bir monitörde 2560 px genişliğinde görülecektir ve tasarımcı başlığın bunların her birinde ekrana oranını korumasını ister. Bunun için yapılmış birim, görünüm alanı genişliği olan vw'dir ve maketten oraya giden yol px'i vw'ye dönüştürmektir: piksel değerini alır, tasarımın çizildiği genişliğe bölersiniz ve yüzle çarparsınız. 1440 px'lik bir tuval üzerindeki 96 px'lik bir başlık 6,67 vw eder ve bundan sonra ekran ne kadar olursa olsun her zaman onun yüzde 6,67'sidir.
Görünüm alanı biriminin vaadi budur ve riski de budur. Rem ve em, tarayıcının makul bir varsayılana ayarladığı bir yazı boyutundan başlar. Vw'nin ise hiç varsayılanı yoktur: görünüm alanı genişliği, okuyucunun penceresi ne kadar genişse odur ve telefonu çevirdiğinde ya da pencereyi sürüklediğinde değişir. Bu yüzden dönüştürücü, cevabın bağlı olduğu tek sayıyı gizlemez. Tasarımın genişliği bir alanda durur, 1440 px ile başlar ve maketinize uyacak şekilde değiştirebilirsiniz.
Aritmetik tarayıcınızda çalışır ve hiçbir şey yüklenmez. Aşağıda formülü, dönüşümün neyi koruduğunu ve neyi koruyamadığını, görünüm alanı birimlerinin nerede yardımcı olduğunu ve nerede zarar verdiğini, saf vw metninin yarattığı erişilebilirlik sorununu, bunu düzelten clamp tekniğini ve piksel maketini akışkan bir stil sayfasına dönüştürme yöntemini bulacaksınız.
Formül ve genişlik
vw, px'in genişliğe bölünüp yüzle çarpılmasına eşittir
Formül vw = px ÷ genişlik × 100'dür. 1440 px tasarım genişliğiyle 144 px'lik bir boyut 10 vw, 72 px 5 vw ve 24 px 1,667 vw olur. Sayfa, neyin varsayıldığını görebilmeniz için genişliği sonucun yanında gösterir; örneğin 144 px = 10 vw (1440 px). Bir vw, görünüm alanı genişliğinin yüzde biridir; bu yüzden 1000 px genişliğindeki bir pencerede 1 vw, 10 px'e eşittir.
1440 nereden geliyor
Buradaki 1440 px, tasarımların sık sık çizildiği bir genişliktir; bir standart değil, bir alışkanlıktır. Bazı ekipler 1280'de, çoğu 1920'de, mobil tasarımlar ise 375 ya da 390'da çizer. Doğru bir cevap yoktur, yalnızca tasarım dosyanızın kullandığı genişlik vardır. Kendinizinkini yazın: dönüşüm, verdiğiniz genişlik kadar iyidir.
Tasarımın kendi genişliğini kullanmak
Maket 1920 px'te çizildiyse 1920 yazın; aynı 96 px'lik başlık 5 vw olur. px'i yanlış genişlikle vw'ye dönüştürürseniz sayfa bir ekran boyutunda doğru, diğerlerinin hepsinde yanlış görünür; bakmayı bilmediğinizde bu şaşırtıcı bir hatadır.
Dönüşümün koruduğu ve koruyamadığı şeyler
Ekrandan alınan payı korur
Bir vw, görünüm alanı genişliğinin yüzde biridir; bu yüzden vw ile yazılmış bir boyut yerinde kalmak yerine pencereyle birlikte büyür ve küçülür. Sonuç, piksel değerinin maketinizde ekranın ne kadarını kapladığıdır ve tarayıcıda öğe bu payı her genişlikte korur.
Varsayılan veremez
Rem'in aksine vw'nin varsayılanı yoktur. Kimse aksini söylemediğinde bir tarayıcı kök yazı boyutunu 16 px yapar, 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 çevirdiğinde değişir. Alandaki genişlik, tasarımınızın genişliğidir ve cevap o genişlikteki bir ekran için doğrudur, başka her yerde ise orantılıdır.
Yuvarlama
1440'a bölmek çoğu boyut için uzun ondalıklar üretir. 6,6667 vw gibi bir değer stil sayfasında sorun değildir, ama gözle görülür bir fark olmadan 6,67'ye ya da 6,7'ye yuvarlayabilirsiniz. Noktadan sonra iki ya da üç basamak tutun; fazlası gürültüdür.
Görünüm alanı birimlerinin yardımcı olduğu yerler
Ana başlıklar ve büyük gösteri yazısı
Her cihazda ekranın belirli bir payını doldurması gereken bir başlık, klasik kullanımdır. Bir telefonun genişliğinde sabit 96 px'lik bir başlık taşardı; vw ile ekranla birlikte küçülür ve tek satırda kalır.
Tam genişlikte bölümler
Bir açılış sayfasının büyük bölümleri arasındaki boşluk, ekranla birlikte ölçeklendiğinde çoğu zaman en iyi görünür; böylece sayfa küçük bir dizüstü bilgisayarda da geniş bir ekranda da ritmini korur. vw cinsinden aralıklar bunu yapar.
Biçimini korumak zorunda olan görseller
vw ile boyutlandırılmış ana görseller, çizimler ve dekoratif şekiller pencereye oranlarını korur; böylece ekran değiştikçe kompozisyon dağılmaz.
Sınırları olan akışkan yazı
clamp() ile birleştirildiğinde vw, bir en küçük ile bir en büyük değer arasında düzgünce büyüyen yazı verir. Modern stil sayfalarının başlıklar için kullandığı teknik budur ve aşağıda ele alınmıştır.
Görünüm alanı birimlerinin zarar verdiği yerler
Saf vw ile gövde metni
Yalnızca vw ile boyutlandırılmış metin, okuyucu sayfayı tarayıcıda yakınlaştırdığında yanıt vermez; çünkü yakınlaştırma pencerenin piksel boyutunu değiştirir ama bir vw boyutu onun payını korur. Çoğu zaman görme sorunları nedeniyle yakınlaştırmaya güvenen insanlar, büyütemedikleri bir metinle kalır. Erişilebilirlik yönergeleri metnin yeniden boyutlandırılabilmesini ister ve saf bir vw boyutu bu sınavı geçemez.
Çok küçük ve çok büyük uç değerler
320 px genişlikte 6,67 vw'lik bir başlık 21 px eder; bu çok küçük olabilir. 2560 px genişlikte 171 px eder; bu çok büyüktür. Sınırlar olmadan, 1440'ta doğru görünen oran uçlarda saçma olabilir.
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 de içerir. Bu yüzden 100vw olarak ayarlanmış bir kutu, sayfa kaydırıldığında görünür alandan biraz daha geniş olur ve yatay bir kaydırma çubuğu ortaya çıkabilir. vw'den tam genişlikte bir düzen kurmadan önce bunu bilin.
Clamp tekniği
Bir taban ve bir tavan belirlemek
clamp(min, tercih edilen, max) CSS işlevi bir en küçük değer, bir tercih edilen değer ve bir en büyük değer alır. Yazı için en küçük ve en büyük değeri rem ile, tercih edilen değeri ise vw artı bir rem terimi olarak yazın: font-size: clamp(2rem, 1rem + 4vw, 6rem). Boyut, pencereyle birlikte 32 ila 96 px arasında büyür ve iki uçtan hiçbirinin ötesine geçmez. Bir kısmı rem ile olduğu için metin yine okuyucunun ayarlarına saygı gösterir.
Ortadaki terim nasıl kurulur
İki ekran genişliği ve her birinde istediğiniz boyutları seçin. Örneğin 360 px genişlikte 32 px ve 1440 px genişlikte 96 px. Eğim (96 − 32) ÷ (1440 − 360) = 0.0593 px/px genişliktir; bu 5,93 vw eder ve kesişim 32 − 0.0593 × 360 = 10.67 px'tir, yaklaşık 0,667 rem. Dolayısıyla tercih edilen terim 0.667rem + 5.93vw'dir. Dönüştürücü vw kısmına yardım eder, geri kalanını bir dakikalık aritmetik yapar.
Bu neden doğru denge
clamp ile tasarımcıların istediği akışkan davranışı ve okuyucuların ihtiyaç duyduğu erişilebilirliği birlikte elde edersiniz. Yukarıda anlatılan soruna verilen cevap budur ve çoğu modern stil sayfasının vw'yi yalnızca clamp'in içinde kullanmasının nedeni de budur.
px'i buradan vw'ye nasıl dönüştürürsünüz
Piksel değerini yazın
Boyutu piksel cinsinden ilk alana girin. Ondalık sayılar kabul edilir.
Tasarımın genişliğini belirleyin
Maketinizin genişliği buysa 1440'ta bırakın. Değilse değiştirin. Sonuç siz yazdıkça güncellenir.
vw değerini kopyalayın
Değeri CSS'inizde birimiyle birlikte kullanın; örneğin font-size: 6.67vw gibi. Metin için rem cinsinden sınırlarla birlikte clamp() içine koyun.
Bu birimler nereden geliyor
CSS pikseli
Ekranlar öngörülebilir bir yoğunluğa sahip olmaktan çıkınca, gerçek piksellerle ölçülen 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 bakıldığında bir inçin yaklaşık 1/96'sı. Maketinizin çizildiği birim budur.
Görünüm alanı birimleri
vw, duyarlı tasarımla birlikte geldi: görünüm alanının genişliğinin yüzde biri, genişlik her ne çıkarsa. Kök yazı boyutuna göre göreli olan rem ve öğeye göre göreli olan em ile yan yana durur. Ekran yerine metne göreli boyutlara ihtiyacınız varsa px'i rem'e dönüştürün.
px'i vw'ye dönüştürürken tuzaklar
Yanlış tasarım genişliğini kullanmak
En yaygın hata. Maketiniz 1920 genişliğindeyse ve 1440 ile dönüştürürseniz her boyut üçte bir oranında yanlış olur. Tasarım aracınızda çerçevenin genişliğini doğrulayın.
Mobil tasarımı unutmak
Birçok ekibin biri masaüstü, biri telefon için olmak üzere iki makete sahiptir. Birincisinde 96 px, ikincisinde 40 px olan bir başlık tek bir vw değeri değildir. İki genişlik, iki dönüşüm ve ikisini birleştirmek için bir clamp kullanın.
Bütün sayfayı vw ile yazmak
Her şeyin pencereyle birlikte ölçeklendiği bir sayfa okuma duygusunu kaybeder: geniş ekranlarda satırlar çok uzar, dar ekranlarda metin çok küçülür. Ölçeklenmesi gereken birkaç şey için vw, geri kalanı için sabit ya da rem boyutları kullanın.
Yakınlaştırma sorununu görmezden gelmek
Sayfanızı tarayıcıda yüzde 200 yakınlaştırarak test edin. Metin büyümüyorsa boyutlara bir rem terimi gerekir.
Dönüştürmeden önce insanların sorduğu sorular
100 px kaç vw eder?
1440 px tasarım genişliğinde yaklaşık 6,94 vw.
Kullanılacak en iyi tasarım genişliği nedir?
Maketinizin çizildiği genişlik. Evrensel bir varsayılan yoktur.
vw, rem'den daha mı iyi?
Farklı işler yaparlar. Rem okuyucunun metin boyutunu izler; vw pencereyi izler. Her birini iyi olduğu iş için kullanın.
Yazı boyutu için vw kullanabilir miyim?
Evet, ama metnin okunabilir kalması ve yine de yakınlaştırılabilmesi için onu rem cinsinden sınırlarla clamp() içine koyun.
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?
Bölmek yerine genişlikle çarpan vw'den px'e dönüştürücüsüyle.
px'i vw'ye dönüştürürken akıllıca seçim yapmak
Ekranla neyin ölçeklenmesi gerektiğine karar verin
Ana başlık yazısı, büyük aralıklar ve görseller: evet. Gövde metni, kenarlıklar, küçük kontroller: hayır. vw değerleri listeniz ne kadar kısaysa sayfa o kadar sağlam olur.
Tasarım aşamasında dönüştürün
px'i vw'ye maketi okurken dönüştürürseniz hangi değerlerin garip çıktığını hemen görebilir ve tasarımcıdan daha derli toplu olanlarını isteyebilirsiniz. 6,6667 vw çıkan bir başlık, onu 6,5 ya da 7 yapmak için bir konuşmaya davet eder.
Genişliğin kaydını tutun
Tasarım genişliğini stil sayfasının en üstüne bir yorum olarak yazın; böylece daha sonra dönüştüren herkes aynısını kullanır. Karışık genişlikler, kimsenin tam olarak açıklayamadığı bir biçimde tutarsız bir sayfa üretir.
Maketten akışkan bir stil sayfasına çalışmak
Ölçeklenmesi gereken boyutları listeleyin
Tasarım dosyasını açın ve ekranı izlemesini istediğiniz her boyutu yazın: ana başlık, bölüm aralıkları, belki büyük bir çizim. Her biri için px'i çerçevenin genişliğine göre vw'ye dönüştürün ve sonucu not edin. Çoğu sayfa on'dan az böyle değerle biter ve geri kalan her şey rem ya da pikselde kalır.
Mobil çerçeveyi ayrıca kontrol edin
Bir telefon maketi varsa aynı öğeleri onun genişliğinde okuyun. 1440 px'lik bir çerçevede 96 px ve 375 px'lik bir çerçevede 40 px olan bir başlık tek bir vw değerine uymaz; bu, clamp kullanmanın işaretidir: telefon boyutu taban, masaüstü boyutu tavan olur ve vw terimi ikisinin arasındaki işi yapar. Her çerçeve için px'i vw'ye dönüştürdüğünüzde iki sayı eğimi belirler.
Üç genişlikte gözden geçirin
Bitmiş sayfaya yaklaşık 360, 820 ve 1440 pikselde ve bir kez de 2560'ta bakın. Akışkan düzenleri maketin genişliğinde doğru yapmak kolaydır ve başka yerlerde ince bir biçimde yanlış olurlar; bu genişliklerden kısa bir geçiş, çoğu sorunu bir ziyaretçiden önce bulur.
Birimi uzun metinden uzak tutun
Okuma metninin satırlarını rem ile boyutlandırmak ve 60 ila 75 karakter civarında bir en büyük satır uzunluğu vermek en iyisidir. Görünüm alanı birimini gösteri yazısı ve boşluklar için kullanın ve okuma metni sabit kalsın.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri de kapsar. Piksele geri dönmek için vw'den px'e dönüştürücüsünü kullanın. Köke göre boyutlar için px'ten rem'e ve rem'den px'e, öğeye göre boyutlar için ise px'ten em'e ve em'den px'e dönüştürücüleri vardır. Aynı stil sayfasının renkleri için HEX'ten RGB'ye ve HEX'ten HSL'ye dönüştürücüleri gösterimleri halleder.
Çalışılmış bir örnek
Bir açılış sayfasının 1440 px'te tasarlandığını, 96 px'lik bir ana başlığı ve onun üstünde 72 px'lik bir aralığı olduğunu varsayın. 96 yazıp 6,667 vw okursunuz, 72 yazıp 5 vw okursunuz. 1000 px'lik bir pencerede başlık 66,7 px ve aralık 50 px olur; orantılıdır. Ama 360 px genişliğindeki bir telefonda başlık 24 px olurdu ve bu istediğinizden küçüktür; bu yüzden başlığı clamp(2.25rem, 1rem + 5vw, 6rem) olarak yazarsınız, bu 36 px'lik bir taban ve 96 px'lik bir tavan verir ve başlık okunabilir ve yakınlaştırılabilir kalır. Metni olmayan aralık düz vw'de kalır.
Kısa bir kontrol listesi
Dönüştürmeden önce
Maketin genişliğini bulun. Hangi boyutların ölçeklenmesi, hangilerinin ölçeklenmemesi gerektiğine karar verin.
Dönüştürürken
Piksel değerini ve tasarım genişliğini yazın, vw değerini birimiyle birlikte kopyalayın.
Dönüştürdükten sonra
Pencereyi telefon genişliğinden geniş bir monitöre kadar yeniden boyutlandırın ve sayfayı yüzde 200 yakınlaştırın. Uç değerler yanlış göründüğü her yerde clamp() ile sınırlar ekleyin.
Sık yapılan hatalar
1440'ın bir standart olduğunu varsaymak
Bu yalnızca bir alışkanlıktır. Kendi genişliğinizi kullanın.
Gövde metnini tek başına vw ile boyutlandırmak
Yakınlaştırılamaz. Bir rem terimi ve sınırlar ekleyin.
Kaydırma çubuğunu unutmak
100vw, kaydırılan masaüstü sayfalarında görünür alandan daha geniştir.
Sayılarınız cihazınızda kalır
Hesaplama 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 yoktur ve oluşturulacak bir hesap da yoktur. px'i vw'ye dönüştürmenin sade yolu budur.
Özet
px'i buradan vw'ye dönüştürmek için boyutu piksel olarak ve tasarımınızın genişliğini yazın ve sonucu hemen okuyun; formül vw = px ÷ genişlik × 100'dür. Genişlik, tasarımların sık sık çizildiği bir genişlik olan 1440 px ile başlar, ama bu bir standart değil bir alışkanlıktır; bu yüzden kendinizinkini yazın. Dönüşüm, ekrandan alınan payı korur: bir vw, görünüm alanı genişliğinin yüzde biridir; bu yüzden vw cinsinden bir boyut pencereyle birlikte büyür ve küçülür. Rem'in aksine vw'nin varsayılanı yoktur, çünkü görünüm alanı okuyucunun penceresi ne kadar genişse odur. Metin için vw'yi, okunabilir ve yakınlaştırılabilir kalması için clamp() içinde rem ile birleştirin. Hiçbir şey yüklenmez.