Bagaimanakah `@media screen dan (max-width: 1024px)` Berfungsi dalam CSS?

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

Pecahan kod yang disediakan ialah media CSS pertanyaan yang nampaknya menyasarkan resolusi skrin atau saiz peranti tertentu. Mari kita pecahkan komponennya untuk memahami tujuannya:

@media skrin: Bahagian pertanyaan media ini menyatakan bahawa peraturan CSS di dalamnya hanya boleh digunakan apabila peranti mengenal pasti dirinya sebagai kategori "skrin". Ini biasanya digunakan pada penyemak imbas desktop dan telefon pintar tertentu.

dan (lebar maksimum: 1024px): Bahagian kedua pertanyaan media menyemak lebar maksimum tetingkap penyemak imbas, termasuk bar skrol . Ia mengehadkan penggunaan peraturan CSS kepada peranti atau tetingkap penyemak imbas yang lebarnya sama dengan atau kurang daripada 1024 piksel.

Digabungkan: Menggabungkan kedua-dua komponen ini, pertanyaan media "@media screen and (max-width: 1024px)" bermakna peraturan CSS khusus di dalamnya hanya akan digunakan pada peranti yang dianggap sebagai peranti "skrin" dengan lebar maksimum 1024 piksel.

Aplikasi Praktikal:

Kod CSS yang anda warisi nampaknya menyasarkan imej dengan kelas "bg" apabila lebar skrin kurang daripada 1024 piksel. Dalam keadaan ini, imej akan dipusatkan secara mendatar pada skrin dengan pelarasan jidar digunakan.

Keserasian Peranti:

Perlu ambil perhatian bahawa penyemak imbas lama mungkin tidak menyokong sifat "max-width" dalam pertanyaan media. Selain itu, sesetengah penyemak imbas desktop mungkin ditetapkan kepada lebar yang lebih besar daripada 1024 piksel, jadi peraturan CSS tidak akan digunakan dalam kes tersebut.

Kesimpulan:

Dengan memahami notasi "@media screen and (max-width: 1024px)", anda boleh menyasarkan saiz peranti tertentu atau resolusi skrin dengan berkesan dalam kod CSS anda dan sesuaikan penampilan atau kefungsian tapak web anda berdasarkan kriteria tersebut.

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