CSS Uzunluk Birimleri Rehberi

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
Temel olarak, CSS uzunluk birimleri web sitelerinin ölçülmesinde ve oluşturulmasında önemli bir role sahiptir. Kenar boşlukları ve dolgular gibi birçok CSS özelliği, çeşitli sayfa öğelerini düzgün şekilde görüntülemek için uzunluk ölçümlerine bağlıdır. Öyleyse, her birinin kendi özel amacına hizmet eden, CSS’de uzunluğu ifade etmek için birkaç farklı ünite bulunması şaşırtıcı değildir.


Tüm CSS uzunluk birimleri, pozitif ya da negatif sayılar olarak ifade edilebilir, ancak bazı özellikler sadece pozitif sayıları kabul eder (örneğin, yazı tipi boyutu). Sayıyı cm (santimetre) veya px (piksel) gibi gerçek uzunluk birimini temsil eden iki harfli bir kısaltma izler. Kuralın istisnası, uzunluk biriminin belirtilmesi gerekmeyen 0 (sıfır) uzunluğudur.

CSS uzunluk birimleri iki tipte gelir: mutlak uzunluk birimleri ve bağıl uzunluk birimleri.

Mutlak CSS uzunluk birimleri​

Mutlak CSS uzunluk birimleri web tasarımı için uygun değildir. Fiziksel dünyadaki ölçümlerin dijital temsilidir ve ekran boyutu ve çözünürlüğü ile ilgili değildir. Belirli bir birimin aynı değerlerinin mutlak uzunlukları farklı ekranlarda farklılık gösterebilir. Bu, ekran DPI’daki farktan kaynaklanır (inç başına nokta sayısı). Daha yüksek çözünürlüklü ekranlar, daha küçük çözünürlüklü ekranlara kıyasla daha yüksek bir DPI’ye sahiptir, böylece görüntü veya metni daha küçük gösterir. Mutlak üniteler, nesnelerin inç, nokta ve resim olarak ölçmenin yaygın olduğu basılı belgeler için stil sayfalarının tanımlanmasında çok daha faydalıdır.

Mutlak uzunluk birimleri şunlardır:

BirimTanım
cmsantimetre
mmmilimetre
ininç (1in = 96px = 2.54cm)
px *pixel (1px = 1/96th of 1in)
ptpoint (1pt = 1/72 of 1in)
pcpica (1pc = 12 pt)
Mutlak uzunluk birimlerinin çoğu web üzerinde işe yaramaz. Px istina tabi.
Piksel görüntüleme cihazına göredir. Ekran görüntüsü için, bir CSS pikseli tipik olarak ekranın bir cihaz pikseline (nokta) eşittir. Yazıcılar ve çok yüksek çözünürlüklü ekranlar için, bir CSS pikseli birden fazla cihaz pikselini ima eder, böylece inç başına piksel sayısı 96 civarında kalır.

Göreceli(Bağıl) CSS uzunluk birimleri​

BirimTanım
emÖğenin yazı tipi boyutuna göre (2em, geçerli yazı tipinin 2 katı anlamına gelir)
exGeçerli yazı tipinin x yüksekliğine göre (nadiren kullanılır)
ch“0” genişliğine göre (sıfır)
remKök öğenin yazı tipi boyutuna göre
vwEkranın genişliğinin% 1’ine oranla *
vhEkranın yüksekliğinin %1’ine oranla *
vminEkranın * 1 küçük boyutuna oranla daha küçük boyut
vmaxEkranın * 1 büyüklüğüne oranla daha büyük boyut
%Ana öğeye göre
Göreceli CSS uzunluk birimleri sabit değerlere sahip değildir. Değerleri önceden tanımlanmış başka bir değer veya özelliğe göredir. Göreceli birimler web tasarımında daha kullanışlıdır, çünkü genişlik, yükseklik, yazı tipi boyutu vb. Diğer bazı temel parametrelerle ilişkilendirebildiğimiz için öğeleri düzgün şekilde boyutlandırmayı kolaylaştırırlar.

Yazı Tipi Bağıl Uzunlukları​

Yazı tipi göreli birimleri, önceden tanımlanmış yazı tipi boyutu veya yazı tipi ailesi değeri ile ilgilidir ve şunları içerir:

  • ex (x-height)
  • ch (character)
  • em (em)
  • rem (root em)

ex​

ex birim “geçerli yazı tipinin x yüksekliği veya bir “em“in yarısı” olarak tanımlanır. Belirli bir fontun x yüksekliği, o fontun küçük harf x’inin yüksekliğidir. Yazı tipi ailesi değiştikçe değişir.

ch​

Bu, x yüksekliğine benzer, yalnızca ch, x karakterinin yüksekliği yerine sıfır (0) karakterinin genişliğine dayanır. Yazı tipi ailesi değiştikçe de değişir.

em​

em birimi, ana öğenin veya ana öğenin yazı tipi boyutuna eşit bir değere sahiptir. Örneğin, ana öğenin yazı tipi boyutu 30 piksel ise, o zaman 1em değeri, tüm alt öğelerin tümü için 30 piksel (30 x 1) olarak hesaplanır. Numaranın tam bir sayı olması gerekmez. Örneğimizde 1em yerine 0.5 koyarsak, bu değer 15 px (30 x 0,5) olarak hesaplanır.

Unutulmaması gereken bir şey em değerinin hemen üst etiketin değerini almasıdır. Bu, iç içe geçmiş elemanlarda istenmeyen sonuçlara yol açabilir.

Örneğin, iç içe geçmiş 3 elementimiz var. İlk eleman (root) 30px font boyutunda, iç içe iki eleman ise fontu 2em olarak ayarlanmış. Kök öğenin içine yerleştirilen öğenin yazı boyutu 60 px (30 x 2) olurken, iç öğenin içine yerleştirilmiş öğenin yazı boyutu 120 px (60 x 2) olur.

rem​

rem birimi em’e benzer, ancak değeri her zaman kök öğenin yazı tipi boyutuna (HTML belgelerinde html öğesidir) eşit kalır. Em gibi aşamalı kullanılmaz.
Hızlı yanıt veren web siteleri geliştirirken rem birimi kullanışlıdır, çünkü tüm sayfayı yalnızca html öğesindeki yazı tipi boyutunu değiştirerek ölçekleyebilirsiniz.

Görüntü Alanı Yüzde Uzunlukları​

Vitrin yüzdesi uzunlukları, görünüm alanının genişliğine ve yüksekliğine dayanır ve şunları içerir:

  • vh (viewport height)
  • vw (viewport width)
  • vmin (viewport minimum)
  • vmax (viewport maximum)

vw​

Bu “görünüm genişliği” birimidir. 1vw, görünüm(viewport) genişliğinin 1 / 100’üne eşittir. Ana öğeden veya ana öğenin genişliğinden bağımsız olarak değerin tüm öğeler için tutarlı kalması dışında, yüzdeye benzer. Örneğin, pencerenin genişliği 1000 piksel ise, 1vw 10 piksel olacaktır.

vh​

Sadece vw (viewport width) birimi ile aynı, bunun yerine viewport yüksekliğine dayanır. 1vh, görünüm yüksekliğinin 1 / 100’üne eşittir. Örneğin, tarayıcının yüksekliği 900px ise, 1vh 9px olarak değerlendirilir.

vmin​

vmin, görünüm yüksekliği ve genişliği arasındaki minimum değerin 1 / 100’üne eşittir. Başka bir deyişle, en küçük uzunluğa sahip tarafın 1 / 100’ü. Örneğin, boyutlar 1200 x 800 olsaydı, değer 8 piksel olurdu.

vmax​

Vmin’e benzer şekilde, bunun dışında, görünümün yüksekliği ve genişliği arasındaki maksimum değerin 1 / 100’üne eşittir. Başka bir deyişle, en büyük uzunluğa sahip tarafın 1 / 100’ü. Örneğin, boyutlar 1200 x 800 olsaydı, değer 12 piksel olurdu.

Yüzde Ölçü Birimi(%)​

Yüzde, teknik olarak bir uzunluk birimi değildir, ancak duyarlı web sitesi geliştirmede çok sık kullanıldığından bu tür bir ilişki vardır.

Yüzde olarak ayarlanan bir uzunluk, ana öğenin aynı özelliğinin uzunluğuna dayanır. Örneğin, ana öğe 1000 piksel genişliğinde ise,%50 genişlik değerine sahip yuvalanmış öğe 500 piksel genişliğinde olacaktır.

Tarayıcı desteği​

em, ex, px, cm, mm, in, pt, ve pc: Eski IE de dahil olmak üzere tüm tarayıcılarda desteklenir.

rem: IE9+ dahil tüm kullanımda olan tarayıcılar.

vw, vh, ve vmin: Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. Internet Explorer vmin, standart olmayan vm sözdizimi tarafından desteklenir.

vmax :Chrome 20+, Firefox 19+ ve Opera 20+ ve Safari 6.1+. IE’de destek yok.
 
Üst Alt