CSS Viewport Birimleri Rehberi vw, vh, vmin, vmax
Vitrin yüzdesi uzunlukları, veya görünüm birimi daha sık belirtildiği gibi, boyutları tanımlamanıza izin veren duyarlı CSS birimleridir. vizörün genişliğinin veya uzunluğunun yüzdesi olarak. Görüntüleme birimleri, yüzde gibi diğer duyarlı CSS birimlerinin olduğu durumlarda oldukça yararlı olabilir. iş yapmak zor.
olmasına rağmen W3C'nin belgeleri görünüm birimleri üzerinde teoriye sokulabilecek her şeyi içerir, çok ayrıntılı değildir. Yani, bu yazıda, bu CSS birimlerinin nasıl olduğuna bir göz atalım. pratikte çalışmak.
Görünüm yüksekliğivh) & görünüm genişliğivw)
W3C bakış açısını tanımlar gibi “ilk içeren bloğun boyutu”. Başka bir deyişle, görünüm alanı tarayıcı penceresinde bulunan veya ekrandaki diğer herhangi bir görüntüleme alanı.
vw ve vh birimler Gerçek görünümün genişliğinin ve yüksekliğinin yüzdesini gösterir. Bir değer alabilirler 0 ile 100 arasında aşağıdaki kurallara göre:
100vw = görünüm genişliğinin% 100'ü 1vw = görünüm genişliğinin% 1'i 100vh = görünüm yüksekliğinin% 100'ü 1vh = görünüm yüksekliğinin% 1'i
Yüzde birime olan farklar
Peki, görünüm birimleri yüzde birimlerden ne kadar farklıdır? Yüzde birimler üst öğelerinin boyutunu devralma görünüm birimleri ise yok. Viewport birimleri her zaman görünüm alanı boyutunun yüzdesi. Sonuç olarak, görünüm çerçevesi birimleri tarafından tanımlanan bir öğe üst öğesinin boyutunu aşabilir..
Örnek: Tam ekran bölümler
Tam ekran bölümler Muhtemelen en yaygın kullanılan görüntüleme çerçevesi üniteleridir..
HTML oldukça basit; biz sadece birbirinin altında üç bölüm ve her birinin yapmasını istiyoruz tüm ekranı koru (ama daha fazla değil).
CSS’de 100vh olarak yükseklik değer ve 100% gibi Genişlik. Kullanmıyoruz vw varsayılan olarak burada birim, kaydırma çubukları da eklenir görünüm alanı için Yani, eğer kullanırsak genişlik: 100vw; a kural yatay kaydırma çubuğu görünecekti tarayıcı penceresinin alt.
* marj: 0; dolgu maddesi: 0; bölüm background-size: cover; arkaplan konumu: merkez; genişlik:% 100; yükseklik: 100vh; .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg'); .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg'); Aşağıdaki gif demosunda bunu görebilirsiniz vh olduğu gerçekten duyarlı bir birim.
W3C belgelerine göre, yukarıda belirtilenler yatay kaydırma çubuğu sorunu ekleyerek çözülebilir taşma: otomatik; kök elemanın kuralı. Bu çözüm sadece kısmen çalışıyor, gerçi. Yatay kaydırma çubuğu aslında kayboluyor ama Genişlik olduğu yine de görüntüleme genişliğine göre hesaplanır (kenar çubuğu dahil), yani öğeler olması gerekenden biraz daha büyük olacak.
Söylerdim, kullanmaya cesaret edemezdim. vw birim açık tam ekran öğelerini boyutlandırma bu sebepten dolayı. Ona ihtiyacımız bile yok genişlik:% 100; Kural mükemmel çalışıyor. Tam ekran düzenleriyle, asıl zorluk her zaman nasıl yapıldığı olmuştur. uygun bir yükseklik değeri ayarlamak ve vh birim bunun için mükemmel bir çözüm sunar.
Diğer kullanım durumları
Eğer ilgileniyorsanız diğer kullanım durumları vw ve vh Lullabot'un bir makalesi var. gerçek hayattan örnekler (Codepen gösterileri ile), örneğin:
- Sabit oranlı kartlar.
- Bir öğeyi ekrandan daha kısa tutma.
- Ölçekleme metni.
- Konteynırın kırılması.
Opera.dev ayrıca, bu araçlardan nasıl yararlanabileceğinizi gösteren kısa bir eğiticiye sahiptir. vw birim duyarlı tipografi oluşturma.
Görünümündeki yalnızca görünüm birimleri kullanamazsınız. Genişlik ve yükseklik özellikleri ancak herhangi biri üzerinde. Örneğin, yapabilirsiniz dolguların ve kenar boşluklarının boyutunu ayarlayın kullanmak vw ve vh birimler de.
Görüntüleme limiti min (vmin) ve görünüm maks.Vmax)
vmin ve Vmax birimler, daha küçük veya daha büyük tarafın boyutu görünümün kuralları, aşağıdaki kurallara göre:
100vmin = 100vw veya 100vh, hangisi daha küçükse 1vmin = 1vw veya 1vh, hangisi daha küçükse 100vmax = 100vw veya 100vh, hangisi daha büyükse 1vmax = 1vw veya 1vh, hangisi daha büyükse
Yani, bir durumda dikey yönlendirme, 100vmin eşittir 100vw, görünüm alanı gibi dikey olarak küçük. Aynı sebepten, 100vmax eşit olacak 100vh.
Benzer şekilde, yatay yönlendirme, 100vmin eşittir 100vh, görünüm alanı gibi yataydan daha küçük. Ve tabi ki, 100vmax eşit olacak 100vw İşte.
Örnek: Kahraman metinlerini her ekranda okunabilir hale getirin
vmin ve Vmax birimler çok daha az yaygın olarak bilinir vw ve vh. Ancak, mükemmel bir şekilde kullanılabilir. yönlendirme yerine @media sorguları. Örneğin, vmin ve Vmax garip görünebilecek unsurlara sahip olduğunuzda kullanışlı olabilir farklı boyutlarda.
Yeni Kodun nasıl yapabileceğinizi tartıştıkları harika bir öğretici var kahraman metnini okunabilir tut Her ekranda, vmin birimi. Kahraman metinleri bakılmaya eğilimli mobil cihazlarda çok küçük ve büyük monitörlerde çok büyük.
İşte çözümlerinin ana fikri:
h1 font-size: 20vmin; font ailesi: Avenir, sans-serif; yazı tipi ağırlığı: 900; metin hizalama: orta;
Codepen demosunda, nasıl kontrol edebilirsiniz vmin kahraman metinlerinin okunabilirlik problemini çözer. Erişmek “Tam sayfa” Codepen’de görüntülemek tarayıcı pencerenizi yeniden boyutlandırın Kahraman metninin nasıl değiştiğini görmek için hem yatay hem de dikey.
Tarayıcı desteği
Aşağıdaki CanIUse tablosunda gördüğünüz gibi, tarayıcı desteği nispeten iyidir görünüm birimleri için. Ancak, bazı IE ve Edge sürümlerinin desteklemediğini unutmayın. Vmax. Ayrıca, iOS 6 ve 7’nin bir sorunu var. vh birim, iOS 8’de düzeltildi.
