Bagaimanakah Pertanyaan Media Bootstrap Boleh Mencapai Pengubahsuaian Teks Berskala untuk Reka Bentuk Web Responsif?

Pengubahsuaian Teks Boleh Skala dengan Pertanyaan Media Bootstrap

Soalan:

Untuk reka letak web responsif, bagaimana pertanyaan media Bootstrap 3 boleh digunakan untuk melaraskan secara dinamik saiz fon berdasarkan skrin dimensi?

Jawapan:

Dalam Bootstrap 3, pertanyaan media yang dipratentukan memberikan fleksibiliti untuk penggayaan bergantung pada saiz skrin:

• @media(max-width:767px) : Extra Small (XS)
• @media(min-width:768px): Kecil (SM)
• @media(min-width:992px): Sederhana (MD)
• @media(min-width:1200px): Besar (LG)

Untuk mengubah saiz fon dengan sewajarnya, gunakan pemilih ini dalam pengisytiharan CSS:

@media (max-width: 767px) {
  h1 {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
}

Bootstrap 4 dan 5 Penambahbaikan:

Dalam Bootstrap 4, tetapan "ekstra kecil" adalah lalai, jadi hanya penggantian media untuk saiz yang lebih besar diperlukan:

@media (min-width: 576px) {
  h1 {
    font-size: 1.8rem;
  }
}

Bootstrap 5 mengekalkan pendekatan ini dan menambah titik putus tambahan pada 1400px:

@media (min-width: 1400px) {
  h1 {
    font-size: 2.5rem;
  }
}

Atas ialah kandungan terperinci Bagaimanakah Pertanyaan Media Bootstrap Boleh Mencapai Pengubahsuaian Teks Berskala untuk Reka Bentuk Web Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!