Pertanyaan media CSS: gunakan gaya berbeza untuk peranti dan saiz skrin yang berbeza

Pertanyaan media CSS ialah teknik yang sangat berguna dalam reka bentuk web, yang membolehkan kami menggunakan gaya berbeza mengikut peranti dan saiz skrin yang berbeza. Melalui pertanyaan media, kami boleh melaraskan reka letak dan penampilan halaman web berdasarkan jenis peranti yang digunakan oleh pengguna, seperti komputer, tablet atau telefon mudah alih, serta faktor seperti lebar dan ketinggian skrin, untuk memberikan yang lebih baik. pengalaman pengguna.

Sebelum menggunakan pertanyaan media CSS, kita perlu memahami beberapa konsep asas dan penggunaan. Pertama sekali, kita perlu menjelaskan dengan jelas bahawa pertanyaan media ialah fungsi CSS3, jadi penyemak imbas diperlukan untuk menyokong CSS3 untuk berfungsi dengan baik.

Pertanyaan media ditakrifkan menggunakan peraturan @media dan biasanya ditulis di bahagian atas fail CSS untuk dimuatkan dahulu. Sintaks pertanyaan media adalah seperti berikut:

@mediatype media dan (syarat) {
gaya CSS
}

Antaranya, mediatype mewakili jenis media biasa adalah seperti berikut:

• semua: terpakai kepada semua. media Peranti;
• skrin: untuk skrin komputer;
• cetak: untuk pencetak dan pratonton cetak;
• Bahagian syarat adalah teras pertanyaan media, dan syarat digunakan untuk menapis peranti atau saiz skrin yang memenuhi syarat. Syarat boleh termasuk atribut yang biasa digunakan berikut:

lebar: lebar skrin;

• tinggi: ketinggian skrin;
nisbah aspek: nisbah bidang skrin;
• resolusi: resolusi skrin.
• Berikut ialah beberapa contoh kod konkrit yang menunjukkan cara menggunakan pertanyaan media untuk menyesuaikan diri dengan peranti dan saiz skrin yang berbeza:
• Gunakan gaya khusus untuk peranti skrin besar:
• @skrin media dan (lebar min: 1200px) {
/

Gaya digunakan apabila lebar skrin lebih besar daripada atau sama dengan 1200px

/

badan {

  font-size: 18px;

1. }
}

Gunakan gaya khusus untuk peranti skrin kecil: : skrin lebar maks@media 767px) {
/

Gaya digunakan apabila lebar skrin ialah 767px atau kurang

/
badan {

  font-size: 14px;

}
2. }

Gunakan gaya khusus untuk paparan landskap:
landskap dan {

/
Gaya digunakan apabila dipaparkan dalam mod landskap

/

badan {

3.   background-color: yellow;

}

}

Gabungkan berbilang syarat menggunakan pertanyaan media:

@skrin media dan (lebar min) dan (lebar maksimum: 768 px) : 1199px) {

/
Gaya digunakan apabila lebar skrin antara 768px dan 1199px

/

badan {

4.   font-size: 16px;

}

}

Melalui contoh di atas, kita dapat melihat bahawa pertanyaan media boleh disesuaikan berdasarkan peranti yang berbeza gaya yang berbeza kepada saiz skrin untuk mencapai reka bentuk responsif halaman web. Dengan menggunakan pertanyaan media secara fleksibel, kami boleh menyediakan pengguna dengan peranti yang berbeza dengan pengalaman pengguna yang lebih baik, dan mencapai kesan paparan antara muka yang baik sama ada pada komputer, tablet atau telefon mudah alih. Sudah tentu, pertanyaan media hanyalah sebahagian daripada reka bentuk responsif, dan teknologi serta amalan lain perlu digabungkan untuk melengkapkan reka bentuk web responsif yang lengkap. Dalam aplikasi praktikal, kami boleh memilih syarat pertanyaan media yang sesuai berdasarkan keperluan projek dan kumpulan pengguna, dan menulis gaya CSS yang sepadan untuk mencapai reka bentuk responsif terbaik.

Atas ialah kandungan terperinci Pertanyaan media CSS: gunakan gaya berbeza untuk peranti dan saiz skrin yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!