Bagaimanakah Pertanyaan Media Membantu Anda Merekabentuk Tapak Web Responsif untuk Saiz Skrin Berbeza?

Pertanyaan Media untuk Penyesuaian Saiz Skrin

Apabila mereka bentuk reka letak web untuk berbilang saiz skrin, pertanyaan media menjadi alat penting. Pertanyaan ini membolehkan pembangun menentukan cara susun atur harus disesuaikan berdasarkan lebar skrin.

Menggunakan Pertanyaan Media untuk Saiz Skrin Tertentu

Untuk menyasarkan saiz skrin tertentu, gunakan atribut media dengan sifat lebar maksimum. Contohnya, untuk menggunakan gaya pada skrin dengan lebar kurang daripada 800px, gunakan:

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

Menggunakan Sampel Kod yang Disediakan

Sampel kod yang disediakan menggunakan pertanyaan media berikut:

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

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

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

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

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

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

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

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

/* iPhone 4 - 5s */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles for iPhone 4 - 5s */
}

/* iPhone 6 */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles for iPhone 6 */
}

/* iPhone 6+ */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /* Styles for iPhone 6+ */
}

/* Samsung Galaxy S7 Edge */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles for Samsung Galaxy S7 Edge */
}

Pertanyaan media ini merangkumi pelbagai saiz skrin, termasuk telefon pintar, tablet dan lebih besar skrin.

Pertimbangan Tambahan

Pertimbangkan untuk menggunakan nilai em dan bukannya piksel untuk lebih fleksibiliti dalam saiz skrin yang berbeza. Untuk panduan lanjut, rujuk artikel "Unit Pertanyaan Media" oleh Zell Weekley.

Atas ialah kandungan terperinci Bagaimanakah Pertanyaan Media Membantu Anda Merekabentuk Tapak Web Responsif untuk Saiz Skrin Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!