Bagaimanakah Saya Boleh Menggunakan Pertanyaan `@media` dengan `min-width` dan `max-width` untuk Penggayaan Silang Penyemak Imbas Konsisten?

Menggunakan @Media dengan Min-Width dan Max-Width

Dalam konteks CSS, pertanyaan @media membenarkan anda menyasarkan skrin tertentu saiz atau peranti dengan gaya yang berbeza. Walau bagaimanapun, menyediakan pertanyaan media untuk berfungsi secara konsisten merentas pelbagai peranti dan penyemak imbas boleh menjadi mencabar.

Dalam kes anda, anda telah menentukan tiga peraturan @media:

@media screen and (min-width: 769px) {...}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 480px) {...}

Semasa persediaan ini berfungsi pada iPhone, tidak jelas mengapa ia tidak berfungsi dalam penyemak imbas. Satu isu yang berpotensi ialah anda menggunakan "peranti" dalam teg meta dan "lebar maks" dan bukannya "lebar peranti maks" dalam peraturan ketiga.

Walau bagaimanapun, pendekatan yang disyorkan ialah mentakrifkan gaya CSS lalai untuk pelayar lama yang tidak menyokong pertanyaan @media. Kemudian, gunakan peraturan @media untuk menyasarkan saiz skrin atau peranti tertentu dengan gaya tambahan. Contohnya:

/* Default styles for older browsers */
body {
  font-size: 14px;
}

/* Styles for screens wider than 960px */
@media only screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

/* Styles for mobile browsers narrower than 480px */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 12px;
  }
}

Dengan mengikuti pendekatan ini, anda boleh memastikan keserasian dengan rangkaian peranti dan penyemak imbas yang lebih luas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pertanyaan `@media` dengan `min-width` dan `max-width` untuk Penggayaan Silang Penyemak Imbas Konsisten?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!