Desain responsif

Fitur web: Kueri penampung (ukuran) Unit area pandang kecil, besar, dan dinamis aspect-ratio min(), max(), dan clamp() Unit area pandang

Praktik terbaik keseluruhan

  • Gunakan kueri @container untuk membuat tata letak responsif berbasis komponen yang menyesuaikan dengan ukuran penampung induknya, bukan area pandang. Lihat Penataan Gaya Berdasarkan Ukuran untuk mengetahui detail selengkapnya.
  • Gunakan unit area pandang dinamis (dvh, dvw) dan bukan vh/vw untuk mencegah kerusakan tata letak saat elemen UI browser seluler (seperti kolom URL) muncul atau menghilang.
  • Gunakan aspect-ratio untuk elemen media (seperti <img> dan <video>) guna menyediakan ruang selama pemuatan dan mencegah Cumulative Layout Shift (CLS).

Untuk mekanisme tata letak di balik UI responsif (flexbox, petak, unit kueri penampung, unit area pandang), lihat Tata Letak CSS dan Desain Responsif.

Tipografi responsif

  • LAKUKAN penggabungan unit relatif area pandang dan relatif font di clamp() untuk ukuran font yang diskalakan dengan ukuran area pandang sekaligus memastikan ukuran font tetap dalam rentang yang diinginkan. Misalnya, clamp(2rem, 1rem + 5vw, 4rem). Sesuaikan proporsi unit relatif area pandang dan relatif font untuk mengontrol seberapa cepat ukuran font berubah.
  • JANGAN gunakan vw saja untuk ukuran font tanpa clamp(), karena dapat menskalakan teks terlalu kecil atau terlalu besar pada layar ekstrem.

Untuk menskalakan jenis dan spasi dengan penampung, bukan area pandang, lihat Penskalaan Fleksibel.