Ö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.

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 Pika 1pc = 1/6'nın 1'i
puan Puan 1 puan = 1/72'nin 1'i
piksel Pikseller 1 piksel = 1/96'nın 1'i

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.

birim şuna göre:
em Yazı tipi boyutuna göre Ör. 1,5em, üst öğesinin temel hesaplanan yazı tipi boyutundan% 50 daha büyük olur. (Geçmişte, büyük "M" harfinin yüksekliği belirtilmektedir).
ör. Sezgisel yöntemle x-height, öğenin geçerli hesaplanan yazı tipi boyutunda "x" harfi veya ".5em" harfi.
cap Öğenin mevcut hesaplanan yazı tipi boyutundaki büyük harflerin yüksekliği.
k Ortalama karakter ilerlemesi öğenin yazı tipindeki dar bir glifin ("0" glifiyle temsil edilir).
ic Ortalama karakter gelişimi tam genişlikte bir glifin resmi "水" ile temsil edilir. (CJK su ideografı, U+6C34) glif.
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-yüksekliği 1ex ve 0 değeri 1ch değerini temsil eder

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.

birim ile
vw Görüntü alanı genişliğinin% 1'i. İnsanlar bu birimi, havalı yazı tipleri yapmak için kullanıyorlar, Örneğin, kullanıcı yeniden boyutlandırırken başlık yazı tipini sayfanın genişliğine göre yeniden boyutlandırabilir yazı tipi de yeniden boyutlandırılacaktır.
Görüntü alanının yüksekliğinin% 1'i. Bunu, kullanıcı arayüzündeki öğeleri düzenlemek için kullanabilirsiniz. kullanabilirsiniz.
vi Kök öğenin satır içi ekseninde görüntü alanının boyutunun% 1'i. Eksen, yazma modlarını ifade eder. İngilizce gibi yatay yazma modlarında satır içi eksen yataydır. Bazı Japon yazı tiplerinde olduğu gibi dikey yazma modlarında, satır içi eksen yukarıdan aşağıya doğru uzanır.
Kök öğenin engelleme eksenindeki görüntü alanının boyutunun% 1'i. Blok ekseni için bu, dilin yönüdür. İngilizce gibi LTR dillerinin dikey blok ekseni vardır. çünkü İngilizce okuyucular sayfayı yukarıdan aşağıya doğru ayrıştırır. Dikey yazma modunda ise yatay blok ekseni bulunur.
vmin Görüntü alanının daha küçük boyutunun% 1'i.
vmax Görüntü alanının daha geniş 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 öğ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

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

cm
Santimetre, geçerli bir mutlak boyut.
ui
Kullanıcı arayüzü, CSS'de yer alan bir boyut değil.
şurada bulunur
İnç, geçerli bir mutlak boyut.
8.
CSS boyutu değil
piksel
Pikseller, geçerli bir mutlak boyuttur.
ch
Karakter birimleri, geçerli bir göreli boyut.
ux
Kullanıcı deneyimi, CSS'deki bir boyut değildir.
e
'M' harfi geçerli bir göreli boyuttur.
ör.
'x' harfi geçerli bir göreli boyuttur.

Mutlak ve göreceli birimlerin farkı nedir?

Mutlak değerler değiştirilemez, ancak göreli birimler değişebilir
Mutlak değerler değişebilir, ancak hesaplama yaptıkları taban değiştirilemez.
Mutlak uzunluk, tek bir paylaşılan taban değere göre hesaplanır. Bu formülde, göreli bir birim, değişebilen bir taban değerle karşılaştırılır.
Göreceli birimler, bağlamsal farkındalıkları nedeniyle daha uyarlanabilir ve esnektir. Ancak belirli tasarımlarda temel olabilecek mutlak birimlerin gücü ve öngörülebilirliği vardır.

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

Doğru
Mutlak gibi görünse de iframe veya web görünümü olabilecek ve her zaman cihaz ekran boyutunu temsil etmeyen bir görüntü alanına bağlıdır.
Yanlış
Bunlar, oluşturuldukları doküman penceresine bağlıdır. Cihaz ekranı ile aynı olabilir veya olmayabilir.

Kaynaklar