Bagaimanakah Saya Boleh Menggunakan Pertanyaan Media untuk Reka Letak Responsif dalam Bootstrap 3?

Memanfaatkan Pertanyaan Media untuk Reka Letak Responsif dalam Twitter Bootstrap 3

Dalam Bootstrap 3, pertanyaan media memainkan peranan penting dalam menyesuaikan reka letak ke skrin yang pelbagai saiz. Sebagai contoh, anda mungkin mahu melaraskan saiz fon berdasarkan lebar skrin. Begini cara untuk mencapai ini menggunakan pertanyaan media:

Pemilih Pertanyaan Media untuk Bootstrap 3

Untuk menyasarkan saiz skrin tertentu, gunakan pemilih berikut:

• @media(max-width:767px): Skrin dengan lebar maksimum 767px
• @media(min-width:768px): Skrin dengan lebar minimum 768px (bersamaan dengan tablet)
• @media(min-width:992px): Skrin dengan lebar minimum daripada 992px (komputer riba)
• @media(min-width:1200px): Skrin dengan lebar minimum 1200px (desktop besar)

Pelarasan Saiz Fon

Untuk melaraskan saiz fon mengikut saiz skrin, gunakan peraturan CSS dalam pertanyaan media yang sesuai. Contohnya:

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}

Nota:

Perlu diingat bahawa terdapat kelas tersembunyi yang tersedia dalam Bootstrap 3 untuk membantu menyahpepijat:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pertanyaan Media untuk Reka Letak Responsif dalam Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!