Apakah yang dilakukan oleh `@media screen dan (max-width: 1024px)` dalam CSS?

Memahami skrin @media dan (lebar maksimum: 1024px) dalam CSS

Menghadapi kod CSS yang tidak dikenali boleh membingungkan. Dalam contoh baru-baru ini, pembangun mewarisi kod yang termasuk baris misteri berikut:

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

Untuk menyahkod baris misteri ini, mari kita mendalami kepentingan pertanyaan media.

Pertanyaan media, seperti yang dibentangkan dalam kod, digunakan untuk menggunakan peraturan penggayaan secara bersyarat berdasarkan kriteria tertentu. Dalam kes ini, kriteria yang diuji ialah:

1. @media skrin: Ini memastikan bahawa peraturan CSS hanya akan digunakan pada peranti yang dikenal pasti sebagai penyemak imbas kelas desktop.

2. (lebar maksimum: 1024px): Syarat ini mengehadkan penggunaan peraturan CSS pada peranti dengan lebar tetingkap penyemak imbas (termasuk bar skrol) 1024 piksel atau kurang.

Berdasarkan kriteria ini, CSS peraturan yang disertakan dalam pendakap hanya akan digunakan pada peranti yang memenuhi kedua-dua syarat, yang kebanyakannya bertujuan untuk mengehadkan penggayaan kepada peranti seperti iPad dan iPhone.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa tetingkap penyemak imbas desktop dengan lebar di bawah 1024 piksel juga akan mewarisi gaya CSS dalam penyemak imbas yang menyokong pertanyaan media lebar maksimum.

Untuk penjelasan lanjut, rujuk spesifikasi Pertanyaan Media yang komprehensif di: http://www.w3.org/TR/css3-mediaqueries/

Atas ialah kandungan terperinci Apakah yang dilakukan oleh `@media screen dan (max-width: 1024px)` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!