Mengapa Susunan Pertanyaan Media Penting dalam CSS?

Kepentingan Susunan Pertanyaan Media dalam CSS

Apabila mereka bentuk tapak web responsif, pertanyaan media CSS menjadi tidak ternilai. Walau bagaimanapun, banyak pembangun web menghadapi tingkah laku yang kelihatan membingungkan: susunan pertanyaan media adalah penting. Mengapakah ini berlaku?

Konsep Lata

CSS beroperasi pada prinsip lata, yang bermaksud bahawa peraturan gaya kemudian mengatasi yang lebih awal untuk elemen yang sama. Konsep ini juga digunakan untuk pertanyaan media. Pertimbangkan contoh berikut:

body {
  font-size: 1em;
}

/* Media Queries */
@media (max-width: 600px) {
  body {
    font-size: 0.9em;
  }
}

/* iPhone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    font-size: 0.9em;
  }
}

Dalam contoh ini, saiz fon badan pada mulanya ditetapkan kepada 1em. Walau bagaimanapun, apabila lebar port pandangan jatuh di bawah 600px, saiz fon harus berubah kepada 0.9em. Walau bagaimanapun, jika pertanyaan media iPhone diletakkan dahulu, penyemak imbas akan menggunakan perubahan saiz fonnya tanpa mengira lebar port pandangan.

Reasoning Behind the Order

Tingkah laku ini adalah sengaja dalam CSS. Susunan pertanyaan media menentukan peraturan khusus untuk digunakan pada elemen berdasarkan saiz skrin semasa. Dengan meletakkan pertanyaan media yang lebih khusus kemudian dalam kod, anda memastikan ia mengatasi peraturan lalai atau kurang khusus. Ini membolehkan kawalan yang lebih halus ke atas reka bentuk responsif tapak web anda.

Contoh

Untuk menggambarkan lebih lanjut, pertimbangkan coretan kod berikut:

/* Media Queries - Correct Order */
@media (max-height: 600px) {
  .two {
    margin-top: 4em;
  }
}

@media (min-height: 750px) and (max-height: 770px) {
  .two {
    margin-top: 7em;
  }
}

/* Media Queries - Incorrect Order */
@media (min-height: 750px) and (max-height: 770px) {
  .two {
    margin-top: 7em;
  }
}

@media (max-height: 600px) {
  .two {
    margin-top: 4em;
  }
}

Dalam coretan "tertib yang betul", pertanyaan media 1024x600 dengan betul mengatasi margin lalai daripada 2em. Walau bagaimanapun, dalam coretan "tertib tidak betul", margin lalai digunakan dan bukannya peraturan 1024x600. Ini menunjukkan kepentingan susunan pertanyaan media.

Kesimpulan

Memahami kepentingan susunan pertanyaan media adalah penting untuk reka bentuk responsif yang berkesan. Dengan meletakkan pertanyaan media yang lebih khusus kemudian dalam kod, anda memastikan bahawa pertanyaan tersebut mengatasi pertanyaan yang kurang spesifik, memberikan anda kawalan yang tepat ke atas penampilan tapak web anda pada peranti dan saiz skrin yang berbeza.

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