Bagaimanakah Saya Boleh Melaraskan Saiz Fon Secara Responsif dalam Bootstrap Menggunakan Pertanyaan Media?

Menggunakan Pertanyaan Media untuk Melaraskan Saiz Fon Secara Responsif dalam Bootstrap

Bootstrap 3 menyediakan pertanyaan media untuk membolehkan pembangun mengubah suai gaya bergantung pada saiz skrin. Untuk melaraskan saiz fon menggunakan pertanyaan media:

Bootstrap 3

1. Gunakan pertanyaan media berikut pemilih:

@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Contoh:

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

Bootstrap 4

1. Gunakan mengikuti pemilih:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Ingat bahawa "lebih kecil" ialah lalai, jadi kod saiz XS dahulu dan kemudian ganti dengan pertanyaan media.

Bootstrap 5

1. Gunakan yang berikut pemilih:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

2. Contoh:

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

Nota: Pemilih ini kekal konsisten pada versi Bootstrap 3.4. 1, 4.6.0 dan 5.3.0.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Saiz Fon Secara Responsif dalam Bootstrap Menggunakan Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!