Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menulis Pertanyaan Media CSS Berkesan untuk Saiz Skrin Berbeza?

Bagaimana untuk Menulis Pertanyaan Media CSS Berkesan untuk Saiz Skrin Berbeza?

Patricia Arquette
Patricia Arquetteasal
2024-11-25 13:46:11806semak imbas

How to Write Effective CSS Media Queries for Different Screen Sizes?

Pertanyaan Media CSS untuk Saiz Skrin: Panduan Komprehensif

Membangunkan reka letak yang menyesuaikan dengan lancar merentas pelbagai saiz skrin merupakan asas reka bentuk responsif moden . Untuk menguasai teknik ini, memahami dan menggunakan pertanyaan media CSS dengan berkesan adalah penting.

Menentukan Saiz Skrin

Dalam senario ini, saiz skrin sasaran disenaraikan sebagai:

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

Untuk membuat reka letak yang melaraskan mengikut lebar tetingkap, pertanyaan media digunakan. Walaupun sampel kod yang disediakan mengandungi pertanyaan media, ia tidak dikonfigurasikan dengan betul. Berikut ialah penyelesaian:

Pertanyaan Media yang Disemak:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

Sumber Tambahan:

  • Sumber: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  • Nilai Responsif: https://zellwk.com/blog/media-query-units/

Kesimpulan:

Dengan menggunakan pertanyaan media yang sesuai, pereka bentuk boleh mencipta reka letak responsif yang mudah menyesuaikan diri dengan pelbagai saiz skrin, memastikan pengalaman pengguna yang optimum merentas berbilang peranti.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn