Mengapa Peraturan CSS Biasa Mengatasi Pertanyaan Media dalam CSS?

Pertanyaan Media dan Keutamaan CSS

Dalam CSS, pertanyaan media kurang diutamakan daripada peraturan CSS biasa. Ini ditentukan oleh CSS Cascade, satu set peraturan yang menentukan susunan gaya digunakan.

Mengapa Pertanyaan Media Kurang Keutamaan

Pertanyaan media tidak meningkatkan kekhususan pemilih. Ini bermakna jika peraturan CSS biasa dan pertanyaan media menyasarkan elemen yang sama dengan kekhususan yang sama, peraturan CSS biasa akan diutamakan.

Contoh:

Pertimbangkan kod berikut:

.logo img {
  width: 100%;
}

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

Dalam contoh ini, pertanyaan media mempunyai keutamaan yang kurang daripada peraturan pertanyaan bukan media. Oleh itu, apabila saiz port pandangan sepadan dengan pertanyaan media, peraturan pertanyaan bukan media akan tetap digunakan, menyebabkan lebar imej ditetapkan kepada 100%.

Penyelesaian

Untuk mengutamakan pertanyaan media berbanding peraturan CSS biasa, terdapat dua pilihan:

1. Swap Rule Order

Susun semula peraturan CSS supaya pertanyaan media datang selepas peraturan pertanyaan bukan media:

.logo img {
  width: 100%;
}

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

2. Tingkatkan Kekhususan Pemilih

Tingkatkan kekhususan peraturan pertanyaan media dengan menambah pemilih tambahan:

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

Elakkan !penting

Lakukan tidak menggunakan perisytiharan "!penting" untuk mengatasi keutamaan pertanyaan media. Ini akan membawa kepada penggunaan "!penting" secara berlebihan dan menyukarkan untuk mengurus kekhususan CSS.

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