Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menulis Pertanyaan Media CSS Berkesan untuk Saiz Skrin Berbeza?
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:
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:
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!