Ölçü Birimleri

Web duyarlı bir ortamdır ancak bazen genel arayüz kalitesini artırmak için boyutlarını kontrol etmek istersiniz. Buna örnek olarak, okunabilirliği artırmak için satır uzunluklarını sınırlamak verilebilir. Web gibi esnek bir ortamda bunu nasıl yaparsınız?

Bu durumda, hesaplanan boyutunda oluşturulan yazı tipindeki "0" karakterinin genişliğine eşit olan bir ch birimi kullanabilirsiniz. Bu birim, metnin genişliğini, metni boyutlandırmak için tasarlanmış bir birimle sınırlamanıza olanak tanır. Böylece, metnin boyutu ne olursa olsun öngörülebilir kontrol sağlanır. ch birimi, bu örnek gibi belirli bağlamlarda faydalı olabilecek birkaç birimden biridir.

Numbers

Sayılar, opacity, line-height ve hatta rgb'deki renk kanalı değerlerini tanımlamak için kullanılır. Sayılar, birimsiz tam sayılar (1, 2, 3, 100) ve ondalık sayılardır (.1, .2, .3).

Sayılar, bağlamlarına göre anlam kazanır. Örneğin, line-height değerini tanımlarken bir sayıyı destekleyici bir birim olmadan tanımlarsanız bu sayı bir oranı temsil eder:

p {
  font-size: 24px;
  line-height: 1.5;
}

Bu örnekte 1.5, p öğesinin hesaplanmış piksel yazı tipi boyutunun %150'sine eşittir. Yani p öğesinin font-size değeri 24px ise satır yüksekliği 36px olarak hesaplanır.

Sayılar aşağıdaki yerlerde de kullanılabilir:

  • Filtreler için değerler ayarlanırken: filter: sepia(0.5), öğeye 50% sepya filtresi uygular.
  • Opaklık ayarlanırken: opacity: 0.5, 50% opaklık uygular.
  • Renk kanallarında: rgb(50, 50, 50), burada renk değeri ayarlamak için 0-255 değerleri kabul edilir. Renk dersine bakın.
  • Bir öğeyi dönüştürmek için: transform: scale(1.2), öğeyi başlangıç boyutunun% 120'si oranında ölçeklendirir.

Yüzdeler

CSS'de yüzde kullanırken yüzdenin nasıl hesaplandığını bilmeniz gerekir. Örneğin, width, üst öğedeki kullanılabilir genişliğin yüzdesi olarak hesaplanır.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

Yukarıdaki örnekte, düzenin varsayılan box-sizing: content-box kullanıldığı varsayılarak div p'ün genişliği 150px'tür.

margin veya padding'ü yüzde olarak ayarlarsanız bu değerler, yönden bağımsız olarak üst öğenin genişliğinin bir kısmı olur.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

Yukarıdaki snippet'te hem margin-top hem de padding-left 150px olarak hesaplanır.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Yüzde olarak bir transform değeri ayarlarsanız bu değer, dönüşüm grubunun bulunduğu öğeyi temel alır. Bu örnekte, p için translateX değeri 10%, width değeri ise 50%'tir. Öncelikle genişliğin ne olacağını hesaplayın: 150px, üst öğesinin genişliğinin %50'si olduğundan. Ardından 150px'ün 10%'ünü alın. Bu değer 15px'dir.

Boyutlar ve uzunluklar

Sayıya bir birim eklerseniz bu birim boyut haline gelir. Örneğin, 1rem bir boyuttur. Bu bağlamda, bir sayıya eklenen birim, spesifikasyonlarda boyut jetonu olarak adlandırılır. Uzunluklar, mesafeyi ifade eden boyutlardır ve mutlak veya göreli olabilir.

Mutlak uzunluklar

Tüm mutlak uzunluklar aynı temelde çözümlenir ve bu sayede CSS'nizde nerede kullanıldıkları fark etmeksizin. Örneğin, öğenizi boyutlandırmak için cm'ü kullanıp ardından yazdırırsanız cetveleyle karşılaştırdığınızda doğru olmalıdır.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Bu sayfayı yazdırırsanız div 10x5 cm boyutunda siyah bir dikdörtgen olarak yazdırılır. CSS'nin yalnızca dijital içerik için değil, basılı içeriklere stil vermek için de kullanıldığını unutmayın. Mutlak uzunluklar baskı için tasarım yaparken çok kullanışlı olabilir.

Birim Ad Eşdeğer
cm Santimetre 1 cm = 96 piksel/2,54
mm Milimetre 1 mm = 1 cm'nin 1/10'u
S Çeyrek milimetre 1Q = 1 cm'nin 1/40'ı
inç İnç 1 inç = 2,54 cm = 96 piksel
pc Picas 1 pc = 1 inç'in 1/6'sı
pt Puan 1 pt = 1 inç'in 1/72'si
px Pikseller 1 piksel = 1 inç'in 96'da 1'i

Göreli uzunluklar

Göreceli uzunluk, tıpkı yüzde gibi bir taban değere göre hesaplanır. Bu değerlerle yüzdeler arasındaki fark, öğeleri bağlama göre boyutlandırabilmenizdir. Bu, CSS'de metin boyutunu temel alan ch gibi birimler ve görüntü alanının (tarayıcı pencereniz) genişliğine dayalı vw gibi birimler olduğu anlamına gelir. Göreli uzunluklar, duyarlı yapısı nedeniyle özellikle web'de yararlıdır.

Yazı tipi boyutuna göreceli birimler

CSS, oluşturulan yazı tipinin öğelerinin boyutuna göre göreceli olan yararlı birimler sağlar. Örneğin, metnin boyutu (em birimi) veya yazı tipi karakterlerinin genişliği (ch birimi).

birim şuna kıyasla:
em Yazı tipi boyutuna göredir. Örneğin, 1,5 em, üst öğesinin temel olarak hesaplanan yazı tipi boyutundan %50 daha büyük olur. (Geçmişte büyük "M" harfinin yüksekliği).
ex Öğenin mevcut hesaplanan yazı tipi boyutunda x-height, bir "x" harfi veya ".5em" harfinin kullanılıp kullanılmayacağını belirlemek için sezgiseldir.
cap Öğenin mevcut hesaplanmış yazı tipi boyutundaki büyük harflerin yüksekliği.
k Öğenin yazı tipindeki ("0" glifiyle temsil edilir) dar bir glifin ortalama karakter ilerlemesi.
ic "水" (CJK su ideografı, U+6C34) glifiyle temsil edilen, öğenin yazı tipinde tam genişlikteki bir glifin ortalama karakter ilerlemesi.
rem Kök öğenin yazı tipi boyutu (varsayılan değer 16 pikseldir).
Öğenin satır yüksekliği.
rlh Kök öğenin satır yüksekliği.
Metin, CSS üst çizgi yüksekliği, iniş aşağısı yüksekliği ve x-yüksekliği etiketleriyle 10 kat mükemmeldir. X-height, 1 ex'i, 0 ise 1 ch'yi temsil eder.

Görüntü alanına göre birimler

Görüntü alanının (tarayıcı penceresi) boyutlarını göreceli bir temel olarak kullanabilirsiniz. Bu birimler, mevcut görüntü alanı alanını bölümlere ayırır.

birim göre
vw Görüntü alanının genişliğinin %1'i. Kullanıcılar bu birimi, bir başlık yazı tipini sayfanın genişliğine göre yeniden boyutlandırmak gibi havalı yazı tipi hileleri yapmak için kullanırlar. Böylece kullanıcı yeniden boyutlandırıldıkça yazı tipi de yeniden boyutlandırılır.
vh Görüntü alanının yüksekliğinin% 1'i. Örneğin, altbilgi araç çubuğunuz varsa öğeleri kullanıcı arayüzünde düzenlemek için bu özelliği kullanabilirsiniz.
vi Kök öğenin satır içi eksenindeki görüntü alanının boyutunun% 1'i. Eksen, yazma modlarını ifade eder. İngilizce gibi yatay yazım modlarında satır içi eksen yataydır. Bazı Japon yazı tipleri gibi dikey yazım modlarında satır içi eksen yukarıdan aşağıya doğru ilerler.
vb Kök öğenin blok eksenindeki görüntü alanının %1'i. Blok ekseni için bu, dilin yönüdür. İngilizce gibi soldan sağa yazılan diller, sayfayı yukarıdan aşağıya doğru ayrıştırdığı için dikey bir blok eksenine sahiptir. Dikey yazma modunda ise yatay blok ekseni bulunur.
vmin Görüntü alanının küçük boyutunun %1'i.
vmax Görüntü alanının daha büyük boyutunun %1'i.
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Bu örnekte, 1vw görünüm genişliğinin% 1'i olduğundan, div görüntü alanının genişliğinin% 10'u olacaktır. p öğesinin max-width değeri 60ch olduğundan, hesaplanan yazı tipi ve boyutunda 60 "0" karakterden oluşan genişliği aşamaz.

Çeşitli birimler

Belirli değer türleriyle ilgilenmek için belirtilen başka birimler de vardır.

Açı birimleri

Renk modülünde, hsl'teki ton gibi derece değerlerini tanımlamak için faydalı olan açı birimlerine baktık. Ayrıca dönüşüm işlevleri içindeki öğelerin döndürülmesi için de kullanışlıdırlar.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

deg açı birimini kullanarak bir div'ı merkez ekseni üzerinde 90° döndürebilirsiniz.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Çözünürlük birimleri

Yukarıdaki örnekte min-resolution değeri 192dpi şeklindedir. dpi birimi, inç başına nokta sayısı anlamına gelir. Bunun için yararlı bir bağlam, medya sorgusunda Retina ekranlar gibi çok yüksek çözünürlüklü ekranları algılayıp daha yüksek çözünürlüklü bir resim sunmaktır.

Öğrendiklerinizi test etme

Beden bilgisi hakkındaki bilginizi test edin

Aşağıdakilerden hangisi geçerli boyutlardır?

ch
ex
8.
ux
piksel
cm
in
ui
em

Mutlak ve göreli birimler arasındaki fark nedir?

Mutlak değerler değiştirilemez, ancak göreli birimler değişebilir
Mutlak uzunluk, tek bir paylaşılan taban değere göre hesaplanır. Göreceli birimin, değişebilen bir taban değerle karşılaştırıldığı bu hesaplama yönteminde, mutlak uzunluk, göreceli birimin değerinden daha büyüktür.

Görüntü alanı birimleri mutlaktır.

Yanlış
Doğru

Kaynaklar