미디어 쿼리는 다양한 화면 크기에 맞는 반응형 웹 사이트를 디자인하는 데 어떻게 도움이 됩니까?

화면 크기 조정을 위한 미디어 쿼리

다양한 화면 크기에 맞게 웹 레이아웃을 디자인할 때 미디어 쿼리는 필수 도구가 됩니다. 이러한 쿼리를 통해 개발자는 화면 너비에 따라 레이아웃을 조정하는 방법을 지정할 수 있습니다.

특정 화면 크기에 대한 미디어 쿼리 적용

특정 화면 크기를 대상으로 하려면 다음과 함께 미디어 속성을 사용하세요. 최대 너비 속성. 예를 들어 너비가 800px 미만인 화면에 스타일을 적용하려면 다음을 사용하세요.

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

제공된 코드 샘플 사용

제공된 코드 샘플은 다음 미디어 쿼리를 사용합니다.

/* 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 */
}

이러한 미디어 쿼리는 스마트폰, 태블릿, 대형 화면 등 다양한 화면 크기를 포괄합니다.

추가 고려 사항

다양한 화면 크기에서 유연성을 높이려면 픽셀 대신 em 값을 사용하는 것이 좋습니다. 자세한 지침은 Zell Weekley의 "미디어 쿼리 단위" 기사를 참조하세요.

위 내용은 미디어 쿼리는 다양한 화면 크기에 맞는 반응형 웹 사이트를 디자인하는 데 어떻게 도움이 됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!