Adakah Semua Penyemak Imbas Menyokong Peraturan @media Bersarang dalam CSS, dan Bagaimana Kami Boleh Memastikan Penggayaan Konsisten?

Peraturan @media bersarang dalam CSS: Sokongan dan Konsistensi Penyemak Imbas

Peraturan @media bersarang dalam CSS telah menjadi subjek kekeliruan mengenai sokongan penyemak imbas . Timbul persoalan, "Penyemak imbas manakah yang menyokong fungsi ini dan bagaimanakah kami boleh memastikan konsistensi?"

Sokongan Penyemak Imbas

первоначально, peraturan @media tidak disokong dalam CSS2.1. Walau bagaimanapun, CSS3 memperkenalkan ciri ini, seperti yang digariskan dalam modul Peraturan Bersyarat. Penyemak imbas moden kini secara universal menyokong penyarangan @media at-rules, dengan Microsoft Edge menjadi satu-satunya pengecualian.

Ketekalan

Kod yang disediakan dalam soalan mempamerkan @media bersarang. peraturan:

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

Dalam CSS3, kod ini harus berfungsi seperti yang dimaksudkan, dengan gaya yang sesuai digunakan berdasarkan pertanyaan media yang ditentukan. Percanggahan antara Firefox dan penyemak imbas lain timbul kerana Firefox telah melaksanakan spesifikasi CSS3, manakala penyemak imbas lain masih mematuhi piawaian CSS2.1 yang lebih lama, yang tidak membenarkan peraturan @media bersarang.

Penyelesaian

Untuk memastikan konsistensi merentas semua penyemak imbas, pertimbangkan untuk menggunakan yang berikut pendekatan:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}

Dengan mengalih keluar sarang, kod akan bertindak secara konsisten merentas semua penyemak imbas sehingga pelaksanaan penuh CSS3 oleh semua penyemak imbas utama.

Atas ialah kandungan terperinci Adakah Semua Penyemak Imbas Menyokong Peraturan @media Bersarang dalam CSS, dan Bagaimana Kami Boleh Memastikan Penggayaan Konsisten?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!