Penskalaan Fleksibel

Fitur web: Kueri penampung (ukuran)

Ringkasan

Penskalaan fleksibel memungkinkan komponen menyesuaikan proporsi internalnya (seperti ukuran font dan spasi) berdasarkan dimensinya saat ini. Hal ini menciptakan desain yang lebih kohesif daripada berpindah-pindah di antara titik henti sementara tetap.

Meskipun penskalaan fleksibel secara historis dicapai menggunakan unit area pandang (penskalaan berdasarkan ukuran layar), unit kueri penampung modern memungkinkan komponen diskalakan secara relatif terhadap penampung induknya. Hal ini memastikan komponen terlihat bagus di mana pun ditempatkan dalam tata letak, sehingga meningkatkan isolasi dan penggunaan kembali komponen.

Penerapan

1. Menentukan container

Untuk menggunakan unit kueri penampung, Anda harus menentukan konteks penampungan terlebih dahulu pada elemen induk.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. Menggunakan unit kueri container

Gunakan unit kueri penampung (cqi, cqb, dll.) untuk menetapkan ukuran yang relatif terhadap dimensi penampung.

  • cqi: 1% dari ukuran inline penampung (lebar dalam mode penulisan horizontal).
  • cqb: 1% dari ukuran blok penampung (tinggi dalam mode penulisan horizontal).

Catatan: Unit penampung dapat digunakan langsung di properti mana pun tanpa memerlukan aturan kueri @container. Class ini otomatis di-resolve berdasarkan ancestor terdekat dengan container-type yang ditentukan.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. Membatasi nilai dengan clamp()

Untuk mencegah ukuran menjadi terlalu kecil atau terlalu besar, gunakan fungsi clamp() CSS. Hal ini memengaruhi kemampuan pengguna untuk memperbesar atau menyesuaikan ukuran font dasar mereka. Untuk memastikan teks memenuhi panduan aksesibilitas, ukuran maksimum tidak boleh lebih dari 2,5 kali ukuran minimum.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

Strategi penggantian

Jika kueri penampung tidak didukung oleh browser, Anda harus memberikan penggantian menggunakan unit area pandang atau kueri media standar.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

Penggantian ini memastikan bahwa teks masih diskalakan, tetapi akan didasarkan pada lebar layar, bukan lebar komponen. Hal ini harus diuji untuk memverifikasi bahwa hal tersebut berfungsi dalam kasus penggunaan Anda.