일관된 크로스 브라우저 스타일을 위해 `min-width` 및 `max-width`와 함께 `@media` 쿼리를 어떻게 사용할 수 있습니까?

Min-Width 및 Max-Width와 함께 @Media 사용

CSS의 맥락에서 @media 쿼리를 사용하면 특정 화면을 타겟팅할 수 있습니다. 다양한 스타일의 크기 또는 장치. 그러나 다양한 기기와 브라우저에서 일관되게 작동하도록 미디어 쿼리를 설정하는 것은 어려울 수 있습니다.

귀하의 경우 세 가지 @media 규칙을 정의했습니다.

@media screen and (min-width: 769px) {...}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 480px) {...}

이 설정이 작동하는 동안 iPhone에서는 브라우저에서 작동하지 않는 이유가 명확하지 않습니다. 한 가지 잠재적인 문제는 메타 태그에 "device"를 사용하고 세 번째 규칙에서 "max-device-width" 대신 "max-width"를 사용한다는 것입니다.

그러나 권장되는 접근 방식은 다음을 정의하는 것입니다. @media 쿼리를 지원하지 않는 이전 브라우저의 기본 CSS 스타일입니다. 그런 다음 @media 규칙을 사용하여 특정 화면 크기나 추가 스타일이 있는 장치를 타겟팅합니다. 예:

/* Default styles for older browsers */
body {
  font-size: 14px;
}

/* Styles for screens wider than 960px */
@media only screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

/* Styles for mobile browsers narrower than 480px */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 12px;
  }
}

이 접근 방식을 따르면 더 다양한 장치 및 브라우저와의 호환성을 보장할 수 있습니다.

위 내용은 일관된 크로스 브라우저 스타일을 위해 `min-width` 및 `max-width`와 함께 `@media` 쿼리를 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!