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 isteyebilirsiniz. Okunabilirliği artırmak için satır uzunluklarını sınırlandırmak buna iyi bir örnektir. Bunu web gibi esnek bir ortamda nasıl yapabilirsiniz?
Bu durumda, hesaplanan boyutunda oluşturulan yazı tipinde "0" karakterin genişliğine eşit bir ch
birimi kullanabilirsiniz.
Bu birim, metni boyutlandırmak için tasarlanmış bir birimle metnin genişliğini sınırlamanıza olanak tanır. Bu sayede, metnin boyutundan bağımsız olarak öngörülebilir kontrol sağlanır.
ch
birimi, bu örnekteki gibi belirli bağlamlarda faydalı olabilecek birkaç birimden biridir.
Numbers
opacity
, line-height
ve hatta rgb
içindeki renk kanalı değerleri için sayılar 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 anlamı, bağlamlarına göre değişir.
Örneğin, line-height
tanımlarken, destekleyici bir birim olmadan tanımlarsanız sayı bir oranı temsil eder:
p {
font-size: 24px;
line-height: 1.5;
}
Bu örnekte 1.5
, p
öğesinin 150% 150%'sine eşittir.
Yani p
için font-size
değeri 24px
ise satır yüksekliği 36px
olarak hesaplanır.
Numaralar aşağıdaki yerlerde de kullanılabilir:
- Filtreler için değer ayarlanırken:
filter: sepia(0.5)
, öğeye50%
sepya filtresi uygular. - Opaklık ayarlanırken:
opacity: 0.5
,50%
opaklığı uygular. - Renk değerinin ayarlanması için 0-255 arasındaki değerlerin kabul edildiği
rgb(50, 50, 50)
renk kanallarında. Renk dersini göster. - Bir öğeyi dönüştürmek için:
transform: scale(1.2)
, öğeyi başlangıç boyutunun% 120'si kadar ö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
değerini kullandığı varsayılarak div p
genişliği 150px
'dır.
Yüzde olarak margin
veya padding
ayarlarsanız yönden bağımsız olarak, üst öğenin genişliğinin bir bölümü 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 */
}
transform
değerini yüzde olarak ayarlarsanız dönüşüm grubu olan öğeyi temel alır.
Bu örnekte, p
öğesinin translateX
değeri 10%
ve width
değeri 50%
değerine sahiptir.
Öncelikle genişliğin ne olacağını hesaplayın: 150px
çünkü üst öğe genişliğinin% 50'si.
Ardından, 150px
üzerinden 10%
alın. Bu, 15px
anlamına gelir.
Boyutlar ve uzunluklar
Bir sayıya birim eklerseniz bu bir boyut olur.
Örneğin, 1rem
bir boyuttur.
Bu bağlamda, bir sayıya iliştirilmiş birime, spesifikasyonlarda boyut jetonu olarak atıfta bulunulur.
Uzunluklar mesafeyi ifade eden boyutlardır ve mutlak veya göreli olabilir.
Mutlak uzunluklar
Tüm mutlak uzunluklar aynı tabana uzanır. Böylece CSS'nizde nerede kullanılmış olurlarsa olsunlar öngörülebilir hale gelir.
Örneğin, öğenizi boyutlandırmak için cm
kullanırsanız ve ardından yazdırırsanız bir cetvel ile karşılaştırdığınızda sonuç doğru olacaktır.
div {
width: 10cm;
height: 5cm;
background: black;
}
Bu sayfayı yazdırdıysanız div
öğesi 10x5 cm siyah dikdörtgen olarak yazdırılır.
CSS'nin yalnızca dijital içerik için değil, basılı içerik stilini belirlemek için de kullanıldığını unutmayın.
Mutlak uzunluklar, baskı için tasarlarken çok yararlı olabilir.
Birim | Ad | Eşdeğeri |
---|---|---|
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 | Pica | 1 pc = 1 inçin 1/6'sı |
puan | Puan | 1 puan = 1 inçin 1/72'si |
piksel | Pikseller | 1 piksel = 1 inçin 1/96'sı |
Göreli uzunluklar
Göreceli uzunluk, yüzdeye benzer bir taban değere göre hesaplanır.
Bunlar ile yüzdeler arasındaki fark, öğeleri içeriğe dayalı olarak boyutlandırabilmenizdir.
Bu, CSS'nin, metin boyutunu temel olarak kullanan ch
ve görüntü alanının (tarayıcı pencereniz) genişliğine dayalı vw
gibi birimlere sahip olduğu anlamına gelir.
Göreli uzunluklar, duyarlı yapısı nedeniyle özellikle web'de yararlıdır.
Yazı tipi boyutuna bağlı birimler
CSS, oluşturulan tipografideki öğelerin boyutuna göre, metnin boyutu (em
birim) veya yazı tipi karakterlerinin genişliği (ch
birim) gibi yararlı birimler sağlar.
birim | göreli: |
---|---|
em | Yazı tipi boyutuna göre, ör. 1,5em, üst yazı tipinin temel olarak hesaplanan yazı tipi boyutundan% 50 daha büyük olacaktır. (Geçmişte büyük "M" harfinin yüksekliği). |
ör. | Öğenin mevcut hesaplanan yazı tipi boyutunda x-yüksekliğinin, "x" harfinin veya ".5em"in kullanılıp kullanılmayacağını belirlemek için sezgisel. |
sınır | Öğenin hesaplanan geçerli yazı tipi boyutundaki büyük harflerin yüksekliği. |
ch | Öğenin yazı tipindeki dar bir glifin ortalama karakter ilerlemesi ("0" glifiyle temsil edilir). |
ic | "水" (CJK su ideogramı, U+6C34) glifiyle temsil edilen şekilde, öğenin yazı tipindeki tam genişlikli glifin ortalama karakter ilerlemesi. |
rem | Kök öğenin yazı tipi boyutu (varsayılan değer 16 pikseldir). |
lh | Öğenin satır yüksekliği. |
rh | Kök öğenin satır yüksekliği. |
Görüntü alanına bağlı birimler
Görüntü alanının (tarayıcı penceresi) boyutlarını göreceli olarak kullanabilirsiniz. Bu birimler, kullanılabilir görüntü alanı alanını oluşturur.
birim | göreli |
---|---|
vw | Görüntü alanı 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ırma gibi önemli yazı tipi püf noktaları için kullanırlar. Böylece, kullanıcı yeniden boyutlandırdığında yazı tipi de yeniden boyutlandırılır. |
vh | Görüntü alanı yüksekliğinin% 1'i. Örneğin, altbilgi araç çubuğunuz varsa kullanıcı arayüzündeki öğeleri düzenlemek için bunu kullanabilirsiniz. |
vi | Kök öğenin satır içi ekseninde görüntü alanının% 1'i. Eksen, yazma modlarını belirtir. İngilizce gibi yatay yazma modlarında satır içi eksen yataydır. Bazı Japonca yazı tiplerinde olduğu gibi dikey yazma modlarında satır içi eksen yukarıdan aşağıya doğru ilerler. |
vb | Kök öğenin engelleme ekseninde görüntü alanının% 1'i. Blok ekseni için bu, dilin yönüdür. İngilizce dilindeki okuyucular sayfayı yukarıdan aşağıya ayrıştırdığından, İngilizce gibi LTR dillerinin dikey blok ekseni olur. Dikey yazma modunda 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 büyük boyutunun% 1'i. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
Bu örnekte, 1vw
görüntü alanı genişliğinin% 1'i olduğundan, div
, görüntü alanı genişliğinin% 10'u olacaktır.
p
öğesi, 60ch
değerine sahip bir max-width
değerine sahip. Bu, hesaplanan yazı tipi ve boyutta 60 "0" karakter genişliğini aşamayacağı anlamına gelir.
Çeşitli birimler
Belirli değer türleriyle başa çıkmak için belirtilen başka birimler de vardır.
Açı birimleri
Renk modülünde, hsl
'daki ton gibi derece değerlerini tanımlamaya yardımcı olan açı birimlerini inceledik.
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
öğesini 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
'dir.
dpi
birimi, inç başına nokta sayısı anlamına gelir.
Bu durum için yararlı bir bağlam, bir medya sorgusundaki Retina ekranlar gibi çok yüksek çözünürlüklü ekranları algılamak ve daha yüksek çözünürlüklü resim sunmaktır.
Öğrendiklerinizi sınayın
Boyutlandırma bilginizi test edin
Aşağıdakilerden hangileri geçerli boyutlardır?
Mutlak ve göreli birimler arasındaki fark nedir?
Görüntü alanı birimleri mutlaktır.