Bagaimanakah Susunan Pertanyaan Media Mempengaruhi Gaya CSS?

Mengapa Urutan Pertanyaan Media Mempengaruhi Gelagat CSS?

Semasa menggunakan pertanyaan media CSS untuk meningkatkan responsif tapak web anda, ia adalah penting untuk ambil perhatian bahawa susunan pertanyaan ini memberi kesan ketara terhadap penggunaannya. Walaupun terdapat anggapan bahawa urutan itu tidak boleh menjejaskan keputusan, pemerhatian empirikal menunjukkan sebaliknya.

Memahami Helaian Gaya Cascading (CSS)

Untuk menyelidiki rasional di sebalik ini tingkah laku, kita mesti terlebih dahulu memahami sifat CSS. Namanya berasal dari ciri asasnya: melata. Ini menunjukkan bahawa peraturan CSS digunakan untuk unsur-unsur supervene berdasarkan susunan penampilan mereka. Oleh itu, peraturan kemudian ditentukan, lebih berwibawa.

Contoh: Pengubahsuaian Margin untuk Kelas "dua"

Pertimbangkan contoh CSS yang disediakan, di mana nilai margin untuk kelas "dua" dilaraskan berdasarkan pelbagai syarat pertanyaan media. Jika pertanyaan untuk 1024x600 muncul di bahagian bawah kod, penyemak imbas akan mengabaikannya dan sebaliknya menggunakan margin lalai yang ditentukan pada permulaan CSS (margin-top:2em). Ini berlaku kerana peraturan lalai mempunyai keutamaan yang lebih tinggi.

Menurutkan Semula Pertanyaan Media

Walau bagaimanapun, jika kami menyusun semula pertanyaan media seperti berikut, tingkah laku yang diingini akan dicapai:

@media (max-width: 480px) { .body { font-size: 0.938em; } }
@media only screen and (-webkit-min-device-pixel-ratio: 2) { body { font-size: 0.938em; } }
@media (min-width: 1200px) { .two { margin-top: 8em; } }
@media (min-height: 1020px) { .two { margin-top: 9em; } }
@media (min-height: 750px) and (max-height: 770px) { .two { margin-top: 7em; } }
@media (max-height: 600px) { .two { margin-top: 4em; } }

Dalam versi resequence ini, pertanyaan untuk 1024x600 telah dialihkan untuk dinilai selepas pertanyaan lain, memastikan ia diutamakan dan margin yang diingini digunakan dengan betul.

Kesimpulan

Susunan pertanyaan media penting dalam CSS kerana sifat CSS yang melata. Apabila berbilang peraturan digunakan pada elemen yang sama, peraturan terakhir yang ditentukan biasanya adalah peraturan yang digunakan. Oleh itu, adalah penting untuk mengatur pertanyaan media secara sengaja untuk mencapai hasil visual yang diingini untuk tapak web anda pada pelbagai saiz skrin.

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