Container query units
cqw, cqh, cqi, cqb birimlerini öğrenirsin.
Container sorgu birimleri
Görüntü alanı birimi vw'yi biliyorsun: görüntü alanı genişliğinin yüzde biri. Container sorgu birimleri de aynı mantıkla çalışır, ama görüntü alanı yerine kapsayıcıyı ölçer.
Dört temel birim: cqw kabın genişliğinin, cqh yüksekliğinin, cqi satır içi ekseninin, cqb blok ekseninin yüzde biridir. cqmin ve cqmax ise en küçük ve en büyük değeri verir.
Bunları yazı boyutu, dolgu ve genişlik için kullanırsan bileşen kaba göre ölçeklenir.
cqi ve cqw farkı
cqw her zaman kabın yatay genişliğini ölçer; cqi ise kabın satır içi eksenini ölçer. Yatay düzende ikisi aynıdır. Ancak dikey yazı modunda satır içi eksen değişir; cqi bu değişime uyum sağlarken cqw sabit kalır.
Bu yüzden çok dilli ve farklı yazı yönü destekleyen tasarımlarda cqi tercih edilir. Tek dil ve yatay düzen için cqw de yeter.
Uygulama cqi ile yazı boyutu ölçekle
.widget seçicisine container-type: inline-size ver. Ardından .widget h2 alt seçicisine font-size: 5cqi tanımla. Böylece başlık, kabın satır içi eksenine göre ölçeklenir; dar kabda küçük, geniş kabda büyük görünür.
Örnek çözümü göster
/* widget kabını aç */
/* başlık kabın genişliğiyle büyüsün */
.widget {
container-type: inline-size;
}
.widget h2 {
font-size: 5cqi;
}Kendini test et
-
Hangi birim kabın satır içi eksenine göre ölçeklenir?
- vw
- cqi
- cqb
- %
Cevabı göster
cqi — Doğru. cqi birimi kabın satır içi ekseninin yüzde biridir.
-
Birimi yaz
.widget h2 { font-size: 5____; }Cevabı göster
.widget h2 { font-size: 5cqi; } -
Birimleri eksenlere eşleştir
- cqw
- Kabın genişliği
- cqh
- Kabın yüksekliği
- cqi
- Satır içi eksen
- cqb
- Blok eksen