Mengapa Pertanyaan Media Lebar Min Bawah Saya Mengatasi Pertanyaan Lebih Tinggi Saya?

Kekhususan CSS, Pertanyaan Media dan Lebar Min: Keutamaan Memahami

Apabila mereka bentuk semula tapak web dengan pendekatan responsif, mengekalkan kekhususan dan memahami tingkah laku pertanyaan media dengan min -lebar adalah penting. Walau bagaimanapun, masalah biasa timbul apabila cuba menulis ganti nilai CSS, kerana tetapan lebar min yang lebih rendah boleh diutamakan.

Pertimbangkan contoh berikut:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

Pada resolusi 600px dan ke atas , adalah dijangka bahawa saiz fon

elemen hendaklah 2.2em. Walau bagaimanapun, output menunjukkan 1.7em sebaliknya. Walaupun pengisytiharan 2.2em muncul dalam alatan pembangun, ia ditindih oleh tetapan 1.7em dalam pertanyaan lebar min yang lebih rendah.

Memahami Keutamaan dalam Pertanyaan Media

Tingkah laku ini disebabkan oleh cara pertanyaan media dinilai. Apabila berbilang pertanyaan media digunakan pada elemen, peraturan yang berlaku terakhir dalam susunan bertingkat diutamakan. Dalam kes ini, memandangkan kedua-dua pertanyaan media menilai kepada benar untuk resolusi 600px dan ke atas, pertanyaan kedua mengatasi pertanyaan yang pertama.

Menyelesaikan Isu

Untuk menyelesaikan masalah ini, susun semula blok pertanyaan media supaya peraturan mengalir dalam yang dimaksudkan pesanan:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

Salin selepas log masuk

Dengan meletakkan pertanyaan lebar min yang lebih rendah dahulu, saiz fon 2.2em kini akan berkuat kuasa pada resolusi 600px dan ke atas.

Kesimpulan

Memahami kekhususan CSS dan susunan pertanyaan media yang melata adalah penting untuk reka bentuk responsif yang berkesan. Dengan mempertimbangkan dengan teliti susunan pertanyaan media anda, anda boleh memastikan bahawa kod anda berkelakuan seperti yang dimaksudkan dan mencapai output visual yang diingini merentas pelbagai saiz skrin.

Atas ialah kandungan terperinci Mengapa Pertanyaan Media Lebar Min Bawah Saya Mengatasi Pertanyaan Lebih Tinggi Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!