Terokai penggunaan kod CSS pertanyaan media

Pertanyaan Media ialah ciri penting dalam CSS3, yang membolehkan pembangun memaparkan reka letak dan gaya halaman yang berbeza pada skrin peranti yang berbeza. Pertanyaan media boleh menetapkan sifat CSS yang berbeza mengikut peranti yang berbeza untuk memenuhi keperluan skrin yang berbeza. Pada masa hadapan reka bentuk dan pembangunan web, pertanyaan media akan menjadi semakin penting. Dalam artikel ini, kami akan meneroka penggunaan kod CSS pertanyaan media.

Sintaks pertanyaan media adalah seperti berikut:

@media (media feature) {
    /*CSS styles*/
}

di mana @media memberitahu penyemak imbas bahawa ini adalah pertanyaan media, ciri media mewakili syarat khusus untuk dikenal pasti oleh media pertanyaan, dan gaya CSS mewakili syarat ini. Gaya CSS digunakan.

Berikut ialah contoh pertanyaan media:

@media (max-width: 600px) {
    body {
        background-color: red;
    }
}

Jadi kod di atas mengatakan bahawa apabila lebar peranti kurang daripada atau sama dengan 600px, gunakan warna latar belakang merah.

Dalam pertanyaan media, kita boleh menggunakan banyak ciri media Berikut ialah beberapa ciri media yang biasa digunakan:

• lebar: Tentukan lebar terminal.
• tinggi: Menentukan ketinggian terminal.
• lebar peranti: Tentukan lebar skrin terminal.
• tinggi peranti: Tentukan ketinggian skrin terminal.
• orientasi: Menentukan sama ada orientasi peranti ialah landskap atau potret.
• nisbah aspek: Tentukan nisbah bidang skrin terminal.
• resolusi: Tentukan resolusi skrin terminal, dsb.

Pertanyaan media bukan sahaja menyokong pertimbangan syarat tunggal, tetapi juga membenarkan pertimbangan berbilang syarat digabungkan, contohnya:

@media (max-width: 480px) and (orientation: portrait) {
    body {
        background-color: yellow;
    }
}

Kod di atas menunjukkan bahawa apabila lebar peranti kurang daripada atau sama dengan 480px, Dan apabila orientasi peranti adalah potret, gunakan kuning sebagai warna latar belakang.

Terdapat juga pertanyaan media: bukan pertanyaan. Pertanyaan tidak menunjukkan bahawa kecuali untuk syarat tertentu, semua syarat lain dipenuhi. Contohnya:

@media not (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

Kod di atas bermakna apabila lebar peranti kurang daripada 768px, saiz fon ialah 16px.

Dalam pembangunan sebenar, kami juga boleh menggunakan koma untuk menggabungkan pertanyaan media yang berbeza bersama-sama, supaya sifat CSS yang berbeza boleh ditetapkan untuk peranti yang berbeza. Contohnya:

@media (min-width: 768px), handheld and (orientation: landscape) {
    body {
        font-size: 20px;
    }
}

Kod di atas bermakna apabila lebar peranti lebih besar daripada atau sama dengan 768px, atau apabila peranti pegang tangan digunakan dalam mod landskap, saiz fon ialah 20px.

Untuk meringkaskan, pertanyaan media ialah salah satu fungsi penting dalam CSS3 Ia boleh menetapkan sifat CSS untuk peranti yang berbeza mengikut ciri skrin peranti, dengan itu mencapai reka letak dan gaya yang berbeza. Dalam pembangunan sebenar, kami boleh menggunakan banyak ciri media yang berbeza untuk menggabungkan pertanyaan media untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci Terokai penggunaan kod CSS pertanyaan media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!