Ölçü Birimleri

CSS Podcast - 008: Boyut Birimleri 'nı inceleyin.

Web duyarlı bir ortamdır ancak bazen genel arayüz kalitesini iyileştirmek için boyutlarını kontrol etmek isteyebilirsiniz. Buna iyi bir örnek, okunabilirliği iyileştirmek için satır uzunluklarını sınırlamaktır. Web gibi esnek bir ortamda bunu nasıl yapardınız?

Bu örnekte "0" genişliğine eşit olan bir ch birimi kullanabilirsiniz karakterini otomatik olarak oluşturursunuz. Bu birim, metnin genişliğini, metni boyutlandırmak için tasarlanmış bir birimle sınırlamanıza, Bunun karşılığında metnin boyutundan bağımsız olarak öngörülebilir kontrol sağlar. ch birimi, bu örnek gibi belirli bağlamlarda faydalı olabilecek birkaç birimden biridir.

Numbers

Sayılar, rgb içindeki opacity, line-height ve hatta 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ın anlamları, bağlamlarına göre değişir. Örneğin, line-height tanımlanırken Sayı, bir destek birimi olmadan tanımlarsanız oranı temsil eder:

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

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

Telefon numaraları aşağıdaki yerlerde de kullanılabilir:

• Filtrelerin değerlerini ayarlarken: filter: sepia(0.5), öğeye bir 50% sepya filtresi uygular.
• Opaklık ayarlanırken: opacity: 0.5, 50% opaklık uygular.
• Renk kanallarında: rgb(50, 50, 50), Burada 0-255 değerleri bir renk değeri ayarlamak için kabul edilebilir. Renk dersini inceleyin.
• 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 öğesini kullandığı varsayılarak div p öğesinin genişliği 150px şeklindedir.

Yüzde olarak margin veya padding değerini ayarlarsanız bunlar üst öğe genişliğinin bir kısmını oluşturur; yapabilirsiniz.

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 dönüşüm grubunun bulunduğu öğeyi temel alır. Bu örnekte, p için translateX değeri 10% ve width değeri 50% olarak belirlenmiştir. Öncelikle, üst genişliğinin% 50'si kadar olduğu için genişliğin ne olacağını hesaplayın: 150px. Ardından, toplam 150px tutarından 10% alın. Bu işlem 15px tutarındadır.

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ı tabana karşı çözümlenir, bunları CSS'nizde kullanıldıkları her yerde tahmin edebilirsiniz. Örneğin, öğenizi boyutlandırmak için cm kullanırsanız ve ardından yazdırmayı bir cetvelle karşılaştırıldığında doğru olması gerekir.

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

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

Göreli uzunluklar

Göreceli uzunluk, tıpkı yüzde gibi bir taban değere göre hesaplanır. Bunlar ile yüzdeler arasındaki fark, öğeleri bağlamsal olarak boyutlandırabilmenizdir. Bu, CSS'nin metin boyutunu temel olarak kullanan ch gibi birimlere sahip olduğu anlamına gelir. ve görüntü alanının (tarayıcı pencereniz) genişliğini temel alan vw. Göreli uzunluklar, duyarlı yapıları nedeniyle özellikle web'de kullanışlıdır.

Yazı tipi boyutuna bağlı birimler

CSS, oluşturulan tipografideki öğelerin boyutuna göre yararlı birimler sağlar. örneğin metnin boyutu (em birim) veya yazı karakterlerinin genişliği (ch birim) gibi.

Görünüme bağlı birimler

Görüntü alanının (tarayıcı penceresi) boyutlarını göreli olarak kullanabilirsiniz. Bu birimler, mevcut görüntü alanı alanını doldurur.

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 öğesi max-width değerine sahip 60ch yani 60 "0" genişliğini aşamaz karakter sayısını girin.

Çeşitli birimler

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

Açı birimleri

Renk modülünde, açı birimlerine baktık tanımlamaya yardımcı olur. örneğin hsl tonu gibi. Bunlar, dönüştürme işlevleri içindeki öğeleri döndürmek için de kullanışlıdır.

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

deg açı birimini kullanarak div eksenini orta ekseninde 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 anlamına gelir. Bunun için çok yüksek çözünürlüklü ekranları, daha yüksek çözünürlüklü bir resim sunması gibi durumlara örnek olarak verilebilir.

Öğrendiklerinizi sınayın

Boyutlandırma bilginizi test edin

Kaynaklar

• CSS Özellik Değerleri ve Birim Düzeyi 4
• MDN'deki Boyutlandırma ve Birimler
• em'ler Hakkında Her Şey
• Yüzde açıklaması