CSS’de, öğelerin boyutlarını belirlemek için farklı ölçü birimleri kullanılır. Bu birimler, öğelerin boyutlarını nasıl tanımladığımıza göre değişir. Ölçü birimleri genellikle kesin veya göreceli olmak üzere iki ana grupta sınıflandırılabilir. Göreceli birimler, öğelerin boyutlarını, bağlı oldukları başka bir öğe ya da çevresel faktörlere göre ayarlar. Bu tür birimler, esnek ve duyarlı tasarımlar oluşturmak için oldukça faydalıdır.
1. em
em, öğenin font boyutuna göre belirlenen bir ölçü birimidir. Yani, bir öğenin em değeri, o öğenin font-size özelliğine göre orantılıdır. Örneğin, 1em, öğenin mevcut font boyutuna eşittir. Eğer iç içe geçmiş öğelerde em kullanıyorsanız, her bir öğe, içinde bulunduğu öğenin font boyutuna göre ölçeklenir.
Örnek:
1 2 3 4 5 6 7 8 9 | div { font-size: 16px; } p { font-size: 2em; /* 32px olur, çünkü div'in font boyutu 16px */ } |
2. rem
rem (root em), em biriminin biraz farklı bir versiyonudur. Bu birim, kök (root) öğesinin font boyutuna göre belirlenir. Yani, rem her zaman html etiketindeki font-size değerine bağlıdır. rem, daha tutarlı ve yönetilebilir tasarımlar için tercih edilir, çünkü iç içe geçmiş öğelerin font boyutları birbirinden bağımsızdır.
Örnek:
1 2 3 4 5 6 7 8 9 | html { font-size: 16px; } p { font-size: 2rem; /* 32px olur, çünkü root (html) öğesinin font boyutu 16px */ } |
3. vw (Viewport Width)
vw, pencerenin genişliğinin yüzdesi olarak ölçülen bir birimdir. 1vw, pencerenin genişliğinin %1’ine eşittir. Bu, özellikle duyarlı tasarımlarda, pencere boyutuna bağlı olarak öğelerin boyutlarını ayarlamak için kullanılır.
Örnek:
1 2 3 4 5 | div { width: 50vw; /* Ekran genişliğinin %50'si kadar genişlik */ } |
4. vh (Viewport Height)
vh, pencerenin yüksekliğinin yüzdesi olarak ölçülen bir birimdir. 1vh, pencerenin yüksekliğinin %1’ine eşittir. Bu birim de duyarlı tasarımlar için oldukça kullanışlıdır.
Örnek:
1 2 3 4 5 | div { height: 100vh; /* Ekran yüksekliğinin %100'ü kadar yükseklik */ } |
5. % (Yüzde)
% (yüzde), öğenin boyutunun, bulunduğu kapsayıcının boyutuna göre belirlenmesini sağlar. Yüzde, yalnızca bir öğenin boyutunun, diğer bir öğenin boyutuna oranı olarak çalışır.
Örnek:
1 2 3 4 5 | div { width: 50%; /* Div'in genişliği, içinde bulunduğu kapsayıcının %50'si kadar olur */ } |
Özet
Göreceli ölçü birimleri, öğelerin boyutlarını çevresel faktörlere göre ayarlamak için kullanılır ve daha esnek tasarımlar oluşturulmasını sağlar. Bu birimler şunlardır:
- em: Öğenin font boyutuna göre belirlenir.
- rem: Kök öğesinin font boyutuna göre belirlenir.
- vw: Görünüm alanının genişliğine göre belirlenir.
- vh: Görünüm alanının yüksekliğine göre belirlenir.
- %: Bağlantılı öğenin boyutuna göre belirlenir.
Bu birimler, duyarlı tasarımlar oluştururken öğelerin ekran boyutlarına göre uyumlu bir şekilde değişmesini sağlar.
Yorum Yap