`max-width` 또는 `max-device-width: 반응형 디자인에 어떤 미디어 쿼리를 사용해야 합니까?`

max-device-width를 사용해야 할까요, 아니면 max-width를 사용해야 할까요?

TL;DR

반응형 웹사이트의 경우, 더 넓은 범위를 타겟팅하려면 미디어 쿼리에서 min-device-width/max-device-width 대신 min-width/max-width를 사용하는 것이 좋습니다.

설명

기기 폭 미디어 기능은 2018 미디어 쿼리 레벨 4 사양 초안에서 더 이상 사용되지 않습니다. 브라우저 뷰포트가 아닌 기기의 실제 화면 크기를 고려하므로 반응 동작에 불일치가 발생할 수 있습니다.

max-width와 max-device-width를 사용하는 이유는 무엇입니까?

• max-width는 뷰포트 크기를 대상으로 하여 기기와 브라우저 창 전반에 걸쳐 응답성을 보장합니다.
• max-device-width는 기기의 실제 화면 크기를 대상으로 하여 브라우저 창 크기를 조정할 때 응답성을 제한합니다.

추가 고려 사항

• 뷰포트 메타 태그 사용()을 사용하여 브라우저 뷰포트 크기 조정을 제어합니다.
• 더 나은 터치 스크린 경험을 위해 기기별 미디어 기능(예: 터치 액션)을 고려하세요.

추가 자료

• [Quirksmode.org - 픽셀은 픽셀이 아닙니다. 픽셀은 픽셀이 아닙니다](https://www.quirksmode.org/mobile/prefsizes.html)
• [W3 - 미디어 쿼리 레벨 4 사양](https://www.w3.org/TR /mediaqueries-4/#device-width)
• [Google 개발자 - 웹 기초 - 뷰포트](https://developers.google.com/web/fundamentals/design-and-ui/Response-design/viewport)
• [Google 개발자 - 웹 기초 - 반응형 CSS 미디어 쿼리](https: //developers.google.com/web/fundamentals/design-and-ui/Response-design/css-media-queries)
• [MDN - 사용 모바일 브라우저에서 레이아웃을 제어하는 ​​뷰포트 메타 태그](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)

위 내용은 `max-width` 또는 `max-device-width: 반응형 디자인에 어떤 미디어 쿼리를 사용해야 합니까?`의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!