Peki ya konteyner görüntü alanı (gövde) değilse?
Bu soru kabul edilen cevap altında Alex tarafından bir yorumda sorulur .
Bu gerçek, vwbu konteynır için bir ölçüde kullanılamayacağı anlamına gelmez . Şimdi hepsinde herhangi bir varyasyon görmek için, kabın bir şekilde esnek boyutta olduğunu varsaymak gerekir. İster doğrudan yüzde, ister width% 100 eksi marjlar olsun. Kap her zaman geniş olarak ayarlanmışsa, nokta "tartışma" haline gelir 200px- diyelim ki genişlik - font-sizeo genişlik için çalışan bir a ayarlayın .
örnek 1
Bununla birlikte, esnek genişlikli bir kapla, kabın bir şekilde yine de görünümden boyutlandırıldığı anlaşılmalıdır . Bu nedenle, vwgörünümün yüzde boyut farkını temel alan bir ayarı ayarlamak meselesidir , bu da üst sargıların boyutlarını dikkate almak anlamına gelir. Bu örneği ele alalım :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Burada varsayarsak divbir çocuktur body, öyle 50%Bunun 100%bu temel durumda viewport boyutudur genişliği. Temel olarak, size vwiyi görünecek bir tane ayarlamak istersiniz. Yukarıdaki CSS içeriğindeki yorumumda görebileceğiniz gibi, bunu tam görüntüleme alanı boyutuna göre matematiksel olarak "düşünebilirsiniz", ancak bunu yapmanız gerekmez . Kap, görünüm alanı yeniden boyutlandırılarak esnediğinden, metin kapla "esneyecek". GÜNCELLEME: işte iki farklı boyutta konteynır örneği .
ÖRNEK 2
Buna dayalı hesaplamayı zorlayarak görünüm alanı boyutlandırmasının sağlanmasına yardımcı olabilirsiniz. Bu örneği düşünün :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Boyutlandırma hala görüntüleme alanına dayanmaktadır, ancak özünde konteyner boyutunun kendisine göre kurulmuştur.
Konteynerin Boyutu Dinamik Olarak Değişirse ...
Kap öğesinin boyutlandırılması, @mediakesme ilişkisiyle veya JavaScript aracılığıyla yüzde ilişkisini dinamik olarak değiştirirse , temel "hedef" ne olursa olsun, metin boyutlandırması için aynı "ilişkiyi" korumak için yeniden hesaplama gerekir.
Yukarıdaki # 1 örneğini ele alalım. Eğer divaktanlmıştır 25%ya genişlik @mediaveya JavaScript, daha sonra, aynı zamanda, font-sizeyeni hesaplama için her iki ortam sorgu ya da JavaScript tarafından ayarlamak gerekir 5vw * .25 = 1.25. Bu, metin boyutunu orijinal 50%kabın "genişliğinin" görüntü alanı boyutundan yarı yarıya azaltılmış olacağı boyuta getirecektir , ancak şimdi kendi yüzde hesaplamasındaki bir değişiklik nedeniyle azalmıştır.
Meydan okuma
İle CSS3 calc()fonksiyonu kullanımda, bu işlev için çalışmıyor gibi dinamik ayarlamak zor olacaktı font-sizebu zamanda amaçları. Böylece genişliğiniz değişiyorsa saf bir CSS 3 ayarlaması yapamazsınız calc(). Tabii ki, kenar boşlukları için küçük bir genişlik ayarı, herhangi bir değişikliği garanti etmek için yeterli font-sizeolmayabilir, bu yüzden önemli olmayabilir.
font-size: 100%;metnin büyüklüğünün% 100'ü anlamına gelir (ör. üst öğesinden miras aldığı). Varsayılan olarak bu 16 pikseldir. Eğer% 50 kullanırsanız, yazı tipi boyutu olurdu: 8px