Duyarlı tasarım

Web özellikleri: Kapsayıcı sorguları (boyut) Küçük, büyük ve dinamik görüntü alanı birimleri aspect-ratio min(), max() ve clamp() Görüntü alanı birimleri

Genel olarak en iyi uygulamalar

  • Görüntü alanı yerine üst kapsayıcının boyutuna uyum sağlayan bileşen odaklı duyarlı düzenler oluşturmak için @container sorgularını kullanın. Daha fazla bilgi için Boyuta Duyarlı Stil bölümüne bakın.
  • Mobil tarayıcı kullanıcı arayüzü öğeleri (adres çubukları gibi) göründüğünde veya kaybolduğunda düzenin bozulmasını önlemek için vh/vw yerine dinamik görüntü alanı birimleri (dvh, dvw) kullanın.
  • Yükleme sırasında yer ayırmak ve Cumulative Layout Shift'i (CLS) önlemek için medya öğelerinde (ör. <img> ve <video>) aspect-ratio kullanın.

Duyarlı kullanıcı arayüzünün (flexbox, tablo, kapsayıcı sorgu birimleri, görüntü alanı birimleri) arkasındaki düzen mekanizmaları için CSS Düzenleri ve Duyarlı Tasarım başlıklı makaleyi inceleyin.

Duyarlı tipografi

  • YAPIN: Görüntü alanına göre ölçeklenen yazı tipi boyutları için clamp() içinde görüntü alanına ve yazı tipine göre değişen birimleri birleştirerek istediğiniz aralıkta kalmalarını sağlayın. Örneğin, clamp(2rem, 1rem + 5vw, 4rem). Yazı tipi boyutunun ne kadar hızlı değişeceğini kontrol etmek için görüntü alanına ve yazı tipine göre değişen birimlerin oranını ayarlayın.
  • clamp() olmadan yazı tipi boyutu için tek başına vw KULLANMAYIN. Bu, metni aşırı büyük veya küçük ekranlarda çok küçük ya da çok büyük ölçekleyebilir.

Yazı tipini ve aralığı görüntü alanı yerine kapsayıcıyla ölçeklendirmek için Akıcı Ölçeklendirme'ye bakın.