Daha İyi Site Düzenleri Oluşturmak için En İyi CSS Birimi Nasıl Seçilir?

CSS birimleri, bir site düzeni oluştururken dikkate alınması gereken en temel hususlardan biridir. Bu birimler, tasarımınızın çeşitli cihazlarda nasıl etkileşim kuracağını tanımlayacaktır.

Ancak, CSS birimleri söz konusu olduğunda, aralarından seçim yapabileceğiniz birçok seçenek vardır ve tüm seçenekler eşit değildir. CSS birimleri yalnızca yazı tipleriyle sınırlı değildir, dolayısıyla bir ön uç geliştirici olarak bu birimlerin mizanpajları nasıl etkilediğini de anlamalısınız.

Bu makalede, size farklı CSS birimlerinin nasıl çalıştığını göstereceğiz, böylece bunları daha iyi düzenler ve site tasarımları oluşturmak için kullanabilirsiniz.

CSS Birim Türleri

CSS birimleri aşağıdaki kategorilere ayrılabilir:

• mutlak birimler
• Yazı tipi göreli birimler
• Göreceli birimleri görüntüle

Mutlak Birimler

Bazı birimler belirli mutlak değerlere bağlıdır ve herhangi bir ekran boyutundan veya yazı tipinden etkilenmez. Bu birimlerin gösterimi, ekranların DPI'sına (nokta/inç) bağlı olduğundan, farklı ekran çözünürlüklerine bağlı olarak değişiklik gösterebilir.

Bu birimler:

• piksel (piksel)
• inç)
• cm (santimetre)
• mm (milimetre)
• bilgisayar (pikalar)
• nokta (puan)

pikseller

Pikseller en yaygın kullanılan ve kabul edilen birimdir. Ve diğer birçok birim için ölçü tabanı olarak kabul edilir. Çeşitli cihazlar arasında en tutarlı sonucu sağlar.

Aşağıdaki örnekteki box elemanı 150 piksel yüksekliğe ve 150 piksel genişliğe sahiptir ve tüm ekran boyutlarında aynı kalacaktır.

[css]
.kutu{
yükseklik:150 piksel;
genişlik:150 piksel;
}
[/css]

(İnç), cm (santimetre) ve mm (milimetre) cinsinden diğer tüm mutlak birimler, çok az gerçek dünya CSS kullanım durumu olan gerçek dünya ölçü birimleridir.

Bununla birlikte, piksellerle ilişkilerini anlamak yine de iyidir, bu yüzden karşılaştırmaları şu şekildedir:

• 1 inç = 96 piksel
• 1 cm = 37,8 piksel
• 1 mm = 3,78 piksel

pc (picas) ve pt (puan) ise doğrudan inç ile ilgilidir.

• 1in = 72pt
• 1 inç = 6 adet

Tüm mutlak birimler arasındaki ilişki şu şekilde gösterilebilir:

Rem

Pikseller dışında, diğer tüm mutlak birimlerin ekran CSS'si için çok az kullanım durumu vardır veya hiç yoktur, ancak bunlar gerçek dünya ölçü birimleri olduklarından, basılı CSS'de etkili bir şekilde kullanılabilirler. (Pikselleri merak ediyorsanız, basılı CSS'de de iyi çalışırlar!)

Yazı tipi göreli birimler

Belgenin yazı tipi boyutuna veya yazı tipi ailesine veya üst düzeydeki öğelerine bağlı olan bazı birimler vardır. Bu, aşağıdaki gibi birimleri içerir:

• em
• rem
• eski
• ch

em

Em, göreli bir uzunluk birimidir; üst öğenin veya belgenin yazı tipi boyutuna bağlıdır. font-size tanımlanmamışsa varsayılan olarak 1em , 16px eşittir.

Em, boyutunu ebeveyninin yazı tipi boyutundan devralır. Bu nedenle, bir üst öğenin font-size:18px sahip olması durumunda, 1em tüm alt öğeleri için 18px olarak ölçülecektir.

Burada üç çocuklu bir div .post var, .post-item , bir başlık ve biraz metin.

[html]
<div sınıfı=”gönderi”>
<div class=”son öğe”>
<h2>Başlık</h2>
Lorem Ipsum, basım ve dizgi endüstrisinin basit bir şekilde sahte metnidir. Lorem Ipsum, 1500'lerden beri endüstrinin standart sahte metni olmuştur.
</div>
<div class=”son öğe”>
<h2>Başlık</h2>
Lorem Ipsum, basım ve dizgi endüstrisinin basit bir şekilde sahte metnidir. Lorem Ipsum, 1500'lerden beri endüstrinin standart sahte metni olmuştur.
</div>
<div class=”son öğe”>
<h2>Başlık</h2>
Lorem Ipsum, basım ve dizgi endüstrisinin basit bir şekilde sahte metnidir. Lorem Ipsum, 1500'lerden beri endüstrinin standart sahte metni olmuştur.
</div>
</div>
[/html]

Artık üst .post bir font-size:20px sahiptir ve alt öğe .post div kendi font-size:1.2em ile padding:0.75em ve margin:0.75em değerine sahiptir, dolayısıyla hesaplanan dolgu ve kenar boşluğu 18 piksel (20 piksel) olacaktır *1,2em*0,75em).

[css]
html{
yazı tipi boyutu: 20px;
}

.postalamak{
yazı tipi boyutu: 20px;
}

.div yayınla{
yazı tipi boyutu: 1.2em;
}

.post-öğe{
arka plan:pembe;
dolgu:0,75em;
marj:0,75em;
}

.son öğe h2{
yazı tipi boyutu: 1.5em;
kenar boşluğu:0,5em 0;
}

.son öğe p{
kenar boşluğu:0;
yazı tipi boyutu: 1em;
}
[/css]

Gördüğünüz gibi, alt öğeler üst öğelerden değerler alıyor.

em kullanmanın avantajı, her bir öğenin font-size , padding ve margin orantılı olarak değiştirmeye karar verirseniz, o zaman yalnızca ana öğenin font boyutunu değiştirmeniz gerekir ve diğer tüm öğeler buna göre ayarlanır.

Her öğeyi ayrı ayrı ayarlamanız gereken px gibi mutlak birimlerde durum böyle olmayacak.

Bu kalıtım doğasının yönetilmesi biraz zor olabilir, ancak iç içe geçmiş öğelerin em'de de kendi font-size varsa.

Önceki demoda olduğu gibi, alt öğelerden birinde başlığı ve paragrafı başka bir div içine kaydırırsanız, garip sonuçlar göreceksiniz.

[html]
<div class=”son öğe”>
<div>
<h2>Başlık</h2>
Lorem Ipsum, basım ve dizgi endüstrisinin basit bir şekilde sahte metnidir. Lorem Ipsum, 1500'lerden beri endüstrinin standart sahte metni olmuştur.
</div>
</div>
[/html]

post-item iç içe bir div içerdiğinden, temel boyut 24 pikselden 28,8 piksele (20 piksel*1,2em*1,2em) ve font-size ve h2 için margin 43,2 piksel (20 piksel*1,2em*1,2em) olarak değişir *1,5em) ve 14,4 piksel (20 piksel*1,2em*1,2em*0,5em).

Rem

Rem, bu tür durumlarda gerçekten yardımcı olabilir çünkü her zaman ana öğeye değil, kök öğe yazı tipi boyutuna atıfta bulunurlar.

Önceki örneği alıp .post div için em olan birimleri rem olarak değiştirirseniz, tüm alt öğelerin kendilerini düzelttiklerini göreceksiniz.

[css]
.div yayınla{
yazı tipi boyutu: 1.2rem;
}
[/css]

Birim em'den rem'e değiştirildiğinde, tabanı üst div'den front-size:20px olan kök öğeye değişir.

Dolayısıyla, hesaplama 20px*1.2rem*value olacaktır ve h2 ve p her ikisi de, ebeveynlerine bakılmaksızın tutarlı font-size ve margin sahip olacaktır.

Eski

Ex, geçerli yazı tipinin x yüksekliğine göredir ve çok nadiren kullanılır. x-yükseklik ölçümü tutarlı değil; bazen yazı tipinin kendisinden gelir ve bazen tarayıcı kendini hesaplar.

Em ve rem gibi, yazı tipine bağlıdır, ancak en büyük fark font-family de değiştirdiğinizde ex'in değişmesidir, bu diğer ikisinde durum böyle değildir.

[css]
.kutu{
genişlik:150ex;
yükseklik:150ex;
}
[/css]

Ch

Ch, ex'e benzer, ancak x yüksekliğine bağlı değildir; bunun yerine sıfır (0) karakterinin genişliğine göre. font-family ile de değişir.

[css]
.kutu{
genişlik:150ch;
yükseklik:150ch;
}
[/css]

Göreli Birimleri Görüntüle

Vitrin yüksekliğine ve genişlik boyutuna bağlı olan birkaç birim vardır, örneğin:

• vh (görüntü alanı yüksekliği)
• vw (görüntü alanı genişliği)
• vmin (görüntü alanı minimum)
• vmax (maksimum görüntü alanı)

Vh

Vh (görüntü alanı yüksekliği), görüntü alanı yüksekliğinin %1'ine eşit 1vh olarak ölçülür. Bu birim, tam yükseklikte öğeler oluşturmak için çok kullanışlıdır. Vh, yüzdeye benzer şekilde tepki verir, ancak ana öğenin yüksekliğine bağlı değildir.

vh'yi her yerde kullanabilirsiniz, ancak vh'nin en yaygın kullanım durumu tam yükseklikte elemanlar yapmaktır. Bu örnekte, full-height sınıfı, görünümün %100 yüksekliği olacak mavi bir kap oluşturacaktır.

[css]
.tam yükseklik{
yükseklik:100vh;
arka plan:mavi;
}
[/css]

vw

Vw (görüntü alanı genişliği), vh'ye benzer, ancak görünümün yüksekliğinden ziyade genişliğini dikkate alır. 1vw, görüntü alanı genişliğinin %1'ine eşittir. Tipografiye dayalı duyarlı bir görüntü alanı oluşturmak istiyorsanız, bu birimler gerçekten yardımcı olabilir.

Bu örnekte, h1 font-siz görünüm alanı genişliğinin %6'sıdır, bu nedenle görüntü alanı genişliği 1000 piksel ise yazı tipi boyutu 60 piksel olur ve görünüm alanı 500 piksel ise yazı tipi boyutu 30 piksel olur.

[css]
h1{
yazı tipi boyutu: 6vw;
}
[/css]

Vmin

Vmin, görünümün genişliğinin veya yüksekliğinin minimum değeri (hangisi daha küçükse) temel alınarak hesaplanır. Diyelim ki 1000 piksel yüksekliğinde ve 800 piksel genişliğinde bir görüntü alanınız var. 1vmin 8px'e eşit olacaktır.

Vmaks

Vmax, görünümün maksimum değerinin dikkate alındığı vmin tam tersi olarak hesaplanır.

1000px yüksekliğinde ve 800px genişliğinde önceki görüntü alanı örneğinde olduğu gibi, 1vmax 10px'e eşit olacaktır.

Şimdi vmin ve vmax nasıl etkin bir şekilde kullanabileceğinizi keşfedelim. Önceki örneğimizi kullanarak, sabit bir değer yerine şimdi görünüm alanı boyutuna dayalı bir sıvı dolgusu ve kenar boşluğuna sahip olmak istediğimizi varsayalım.

Bu kod parçacığında, dolguyu 3vmax ve kenar boşluğunu 1.5vmin olarak ayarladım.

[css]
.post-öğe{
arka plan pembesi;
dolgu: 3vmaks;
kenar boşluğu: 1,5vdak;
}
[/css]

Dolgu ve kenar boşluğu, görüntü alanı boyutuna göre değişecektir.

Yüzde(%) birimi

Yüzde(%) birimi, yukarıda belirtilen belirli bir kategoriye ait değildir, ancak göreceli bir birim olarak kategorize edilebilir. Ana elemanına göredir.

Yüzde, öncelikle bir öğenin yüksekliği ve genişliği ile ilişkilendirilir, ancak CSS uzunluk birimlerine izin verilen her yerde kullanılabilir.

Yüzde, duyarlı veya akıcı bir düzen oluşturmak için en kullanışlı birimlerden biridir. Bootstrap, Foundation ve Bulma gibi popüler çerçeveler, temel düzenleri için yüzde kullanır.

Burada full-width sınıf, ana öğesinin genişliğinin %100'ü kadar olacaktır.

[css]
.Tam genişlik{
genişlik: %100;
}
[/css]

Çözüm

Kullanılabilecek neredeyse tüm CSS birimlerini ele aldık. Hedeflerinize bağlı olarak, bazıları diğerlerinden daha uygun olacaktır. Bir ön uç geliştirici olarak seçeneklerinizi bilmek her zaman iyidir çünkü bir sonraki projenizde hangisine ihtiyaç duyacağınızı asla bilemezsiniz.

Peki, istenen sonucu elde etmek için en sık hangi birimleri kullanıyorsunuz? Aşağıdaki yorumlar bölümünde bize bildirin!