태블릿에서 CSS 미디어 쿼리 방향 문제를 극복하는 방법: 미디어 쿼리를 버리는 것이 가치가 있습니까?

대체 방법으로 CSS 미디어 쿼리 방향 문제 해결

CSS 미디어 쿼리는 기기 방향에 따라 스타일을 조정하는 편리한 방법을 제공합니다. 그러나 특정 태블릿 장치, 특히 Android를 실행하는 장치에서는 입력 중 소프트 키보드가 있으면 이 기능이 중단될 수 있습니다.

이 문제를 회피하기 위한 대체 솔루션은 방향에 대한 미디어 쿼리 사용을 피하는 것입니다. 기반의 스타일링. 대신 클래스를 동적으로 추가하거나 제거하여 기기의 현재 방향에 따라 특정 요소를 타겟팅할 수 있습니다.

이 접근 방식은 "세로" 또는 "가로"와 같은 클래스를 HTML 요소에 할당하는 것으로 시작됩니다. 이어서 이러한 클래스의 존재 여부에 따라 요소 표시를 제어하기 위한 CSS 규칙이 정의됩니다. 예를 들면 다음과 같습니다.

<code class="css">.portrait .portrait-only { display: block; }
.portrait .landscape-only { display: none; }
.landscape .landscape-only { display: block; }
.landscape .portrait-only { display: none; }</code>

이렇게 하면 미디어 쿼리에 의존하지 않고 방향에 관계없이 적절한 요소가 표시됩니다.

향상된 대안: min-Aspect-Ratio 및 max-Aspect-Ratio

보다 최근의 강력한 솔루션에는 화면의 가로 세로 비율을 대상으로 하는 미디어 쿼리를 사용하는 것이 포함됩니다. 특히 다음과 같은 미디어 쿼리를 사용할 수 있습니다.

<code class="css">@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}
@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}</code>

이 방법은 화면의 가로 세로 비율이 세로 방향과 가로 방향 사이에서 크게 변한다는 사실을 활용합니다. 따라서 소프트 키보드가 있는 경우에도 방향에 따라 CSS 스타일을 제어하는 ​​정확하고 안정적인 방법을 제공합니다.

위 내용은 태블릿에서 CSS 미디어 쿼리 방향 문제를 극복하는 방법: 미디어 쿼리를 버리는 것이 가치가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!