Mengapa Pertanyaan Bukan Media Kadangkala Mengatasi Pertanyaan Media dalam CSS?

Pertanyaan Media lwn. Pertanyaan Bukan Media: Memahami Kekhususan CSS

Dalam CSS, pertanyaan media digunakan untuk menggunakan gaya berdasarkan skrin peranti saiz atau ciri-ciri port pandang lain. Walau bagaimanapun, selalunya diperhatikan bahawa pertanyaan media kelihatan mempunyai keutamaan yang lebih rendah berbanding dengan pengisytiharan CSS biasa.

Sebab Keutamaan Rendah

Tingkah laku ini berpunca daripada konsep lata CSS . Apabila berbilang peraturan menyasarkan elemen yang sama, penyemak imbas mengutamakan peraturan berdasarkan kekhususannya. Pemilih dengan kekhususan yang lebih tinggi akan mengatasi kekhususan yang lebih rendah.

Pertanyaan media sememangnya tidak meningkatkan kekhususan pemilih. Oleh itu, jika pemilih pertanyaan bukan media dan pemilih pertanyaan media mempunyai kekhususan yang sama, pemilih pertanyaan bukan media akan diutamakan apabila pertanyaan media tidak relevan.

Contoh:

Pertimbangkan coretan CSS berikut:

.logo img {
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

Dalam contoh ini, peraturan pertanyaan bukan media mentakrifkan lebar lalai 100% untuk imej logo. Walau bagaimanapun, apabila lebar skrin berada dalam julat yang ditentukan, pertanyaan media diaktifkan dan menetapkan lebar kepada 120%.

Walau bagaimanapun, jika lebar skrin berada di luar julat ini, peraturan pertanyaan bukan media akan mengambil masa. keutamaan, mengatasi tetapan lebar pertanyaan media.

Penyelesaian untuk Meningkatkan Keutamaan

Untuk meningkatkan keutamaan pertanyaan media:

1. Tukar Susunan Peraturan:

   • Alihkan peraturan pertanyaan media di bawah peraturan pertanyaan bukan media untuk memanfaatkan lata pesanan.

2. Tingkatkan Kekhususan Pemilih:

   • Tingkatkan kekhususan pemilih pertanyaan media dengan menambahkan teg atau atribut tambahan pemilih. Sebagai contoh, menukarnya kepada .logo a img akan meningkatkan kekhususannya.

3. Gunakan !important (Awas):

   • Kaedah ini melibatkan penambahan "!penting" pada peraturan pertanyaan media. Walau bagaimanapun, ia tidak digalakkan kerana ia berpotensi menyebabkan isu penyelenggaraan.

Atas ialah kandungan terperinci Mengapa Pertanyaan Bukan Media Kadangkala Mengatasi Pertanyaan Media dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!