Mövzunu Açan
#0
Viewport birimleri, web tasarımında responsive (duyarlı) tasarım uygulamalarında sıkça kullanılan ölçüm birimleridir. Bu birimler, bir sayfanın görüntülendiği alanın boyutlarına göre dinamik olarak ayarlanabilen değerler sunar. Genel olarak, viewport birimleri iki ana kategoriye ayrılır:
Viewport birimleri, CSS ile birlikte kullanıldığında oldukça esnek ve etkili bir tasarım imkanı sunar. Örneğin, bir yazı tipi boyutunu viewport birimleri ile ayarlamak, kullanıcı ekran boyutuna göre metnin okunabilirliğini artırır.
Bu sayede, farklı cihazlarda aynı görünümü elde etme şansı artar. Ayrıca, viewport birimleri, animasyonlar ve geçiş efektleri gibi dinamik öğelerin tasarımında da kullanışlıdır.
Sonuç olarak, viewport birimleri, modern web tasarımında kritik bir rol oynamaktadır. Duyarlı tasarım uygulamalarında kullanılmaları, geliştiricilere ve tasarımcılara daha esnek ve kullanıcı dostu arayüzler oluşturma imkanı sunmaktadır.
vw (viewport width) ve vh (viewport height).- vw (Viewport Width): 1 vw, viewport'un genişliğinin %1'ine eşittir. Örneğin, bir öğenin genişliğini 50 vw olarak ayarlarsanız, bu öğe ekranın genişliğinin yarısı kadar geniş olur.
- vh (Viewport Height): 1 vh, viewport'un yüksekliğinin %1'ine eşittir. Eğer bir öğenin yüksekliğini 100 vh olarak ayarlarsanız, bu öğe ekranın tamamını kaplar.
- vmin ve vmax:
vmin, viewport’un genişliği ve yüksekliğinden hangisi daha küçükse onun %1'ine eşittir.vmaxise, hangisi daha büyükse onun %1'ine eşittir. Bu birimler, özellikle farklı ekran boyutlarındaki uyumu sağlamak için yararlıdır.
Viewport birimleri, CSS ile birlikte kullanıldığında oldukça esnek ve etkili bir tasarım imkanı sunar. Örneğin, bir yazı tipi boyutunu viewport birimleri ile ayarlamak, kullanıcı ekran boyutuna göre metnin okunabilirliğini artırır.
CODE
123h1 {
font-size: 5vw; /* Ekran genişliğinin %5'i kadar bir boyut */
}Bu sayede, farklı cihazlarda aynı görünümü elde etme şansı artar. Ayrıca, viewport birimleri, animasyonlar ve geçiş efektleri gibi dinamik öğelerin tasarımında da kullanışlıdır.
Sonuç olarak, viewport birimleri, modern web tasarımında kritik bir rol oynamaktadır. Duyarlı tasarım uygulamalarında kullanılmaları, geliştiricilere ve tasarımcılara daha esnek ve kullanıcı dostu arayüzler oluşturma imkanı sunmaktadır.