반응형 CSS 스타일을 모바일 장치에만 적용하는 방법은 무엇입니까?

모바일 기기에만 반응형 CSS 스타일 적용

반응형 CSS 스타일을 만들 때는 의도한 기기에만 적용되도록 하는 것이 중요합니다. 모바일 장치를 대상으로 하지만 데스크톱 프레젠테이션을 방해하는 것을 방지하는 데 어려움이 있는 경우 다음 접근 방식을 고려하십시오.

미디어 쿼리 범위 사용

단일 미디어 쿼리 중단점을 사용하는 대신 다양한 중단점. 이를 통해 다른 장치를 제외하면서 모바일 스타일을 적용해야 하는 특정 너비 범위를 지정할 수 있습니다.

다음은 너비가 480px에서 1024px 사이인 장치를 대상으로 하는 미디어 쿼리 범위의 예입니다.

<code class="css">@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles go here */
}</code>

일반적인 장치 크기에 대한 범위 정의

가장 일반적인 장치 크기를 포괄하려면 다음 범위를 고려하십시오.

<code class="css">@media all and (min-width: 0px) and (max-width: 320px)
@media all and (min-width: 321px) and (max-width: 480px)
@media all and (min-width: 569px) and (max-width: 768px)
@media all and (min-width: 769px) and (max-width: 800px)
@media all and (min-width: 801px) and (max-width: 959px)
@media all and (min-width: 960px) and (max-width: 1024px)</code>

EM 또는 % 단위 사용

스타일은 장치의 해상도에 관계없이 잘 확장되므로 px 단위를 사용하지 마십시오. 대신 EM 또는 % 단위를 선택하세요. EM 단위는 상위 요소의 글꼴 크기를 기준으로 하고 % 단위는 요소의 전체 너비를 기준으로 합니다.

코드 예

다음은 미디어를 사용하여 업데이트된 코드 버전입니다. 쿼리 범위 접근 방식 및 EM 단위:

<code class="css">/* Regular desktop styles */

/* Mobile only styles for devices between 480px and 1024px */
@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles using EM units */
}</code>

이 코드는 데스크톱 스타일과의 분리를 유지하면서 모바일 스타일이 지정된 너비 범위 내의 장치에만 적용되도록 보장합니다.

위 내용은 반응형 CSS 스타일을 모바일 장치에만 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!