Bagaimana untuk Membuat Pertanyaan Media CSS untuk Saiz Skrin Tertentu?

Memahami Pertanyaan Media CSS untuk Reka Letak Responsif

Masalahnya:

Mewujudkan tapak web yang menyesuaikan diri dengan pelbagai skrin saiz boleh menjadi satu cabaran. Pembangun sering bergelut dengan pelaksanaan pertanyaan media CSS untuk mencapai responsif ini.

Soalannya:

Seorang pembangun sedang mencari bantuan dalam membuat pertanyaan media CSS untuk reka letak yang serasi dengan skrin berikut saiz:

• 640x480
• 800x600
• 1024x768
• 1280x1024 (dan lebih besar)

Jawapan:

Pertanyaan Media untuk Saiz Skrin Tertentu:

Untuk membuat pertanyaan media bagi saiz skrin khusus ini, gunakan sintaks berikut:

@media screen and (max-width: 640px) {
  /* Styles for screens up to 640px wide */
}

@media screen and (max-width: 800px) {
  /* Styles for screens up to 800px wide */
}

@media screen and (max-width: 1024px) {
  /* Styles for screens up to 1024px wide */
}

@media screen and (min-width: 1280px) {
  /* Styles for screens 1280px wide and larger */
}

Tambahan Pertimbangan:

Gunakan nilai em dan bukannya piksel untuk responsif yang lebih baik.
• Pertimbangkan untuk menggunakan pertanyaan media khusus peranti (cth., untuk iPhone, iPad) untuk keserasian peranti yang optimum.
• Rujuk senarai lengkap pertanyaan media ini untuk peranti standard: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Contoh Penggunaan:

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pertanyaan Media CSS untuk Saiz Skrin Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!