CSS Podcast - 008: Boyutlandırma 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), öğeye50%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. |
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?
Mutlak ve göreli birimler arasındaki fark nedir?
Görüntü alanı birimleri mutlaktır.