Apa yang Berlaku Apabila Berbilang Pertanyaan Media CSS Bertindih?

Pertindihan Pertanyaan Media: Lata Berkuasa Tertinggi

Apakah yang berlaku apabila berbilang pertanyaan media sepadan dengan saiz port pandangan yang sama? Jawapannya terletak pada prinsip teras CSS: lata dan peraturan pertindihan.

Lata dalam Tindakan

peraturan@media ikut lata sama seperti peraturan CSS biasa. Apabila berbilang peraturan @media sepadan, semua gaya padanan digunakan dan lata menyelesaikan sebarang konflik. Dalam erti kata lain, peraturan gaya paling spesifik yang terakhir diisytiharkan menang.

Bertindih di Titik Putus

Tepat 20em dan 45em, pertanyaan media pertama dan kedua anda, dan pertanyaan media kedua dan ketiga anda, masing-masing, akan sepadan. Penyemak imbas menggunakan gaya daripada kedua-dua peraturan dan lata dengan sewajarnya. Jika terdapat perisytiharan yang bercanggah, peraturan yang diisytiharkan terakhir akan diutamakan.

Pecahan Contoh

Pertimbangkan kod berikut:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

Pada 20em luas, kedua-dua pertanyaan media sepadan. Lata mengatasi paparan: tiada dengan paparan: blok dan apungan: kiri digunakan pada elemen dengan kelas .bar sisi.

Elakkan Bertindih dengan Pengecualian Bersama

Untuk mengelakkan pertindihan , pastikan pertanyaan media anda saling eksklusif. Ingat, min- dan max- menandakan keterangkuman. (lebar min: 20em) dan (lebar maks: 20em) kedua-duanya sepadan dengan port pandangan lebar 20em.

Nilai Piksel Pecahan

Nilai piksel dalam CSS ialah piksel logik. Saya tidak dapat mencari penyemak imbas yang melaporkan nilai piksel pecahan untuk lebar viewport. Safari pada iOS membundarkan nilai pecahan untuk memastikan bahawa (lebar maksimum: 799px) atau (lebar min: 800px) sepadan dengan sekurang-kurangnya satu peraturan, walaupun jika port pandangan ialah 799.5px.

Atas ialah kandungan terperinci Apa yang Berlaku Apabila Berbilang Pertanyaan Media CSS Bertindih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!