[CSS] PC와 Mobile 구분 방법

기본(Primary) 포인팅 장치를 고려한 방법

기본(Primary) 입력 메커니즘을 기준으로 기능을 지원합니다.

@media (hover: none) and (pointer: coarse) {
  /* touch 가능 (스마트폰, 터치스크린) */
}

@media (hover: hover) and (pointer: fine) {
  /* hover 가능 (마우스, 터치패드) */
}

보조 장치까지 고려하는 방법

다수의 입력 메커니즘을 가졌을때, '적어도 하나' 에서 해당 값을 만족하는 경우 기능을 지원합니다.

@media (any-hover: none) {
   /* 호버링할 수 없거나 포인팅 입력 메커니즘이 없습니다 */
}

@media (any-hover: hover) {
    /* 하나 이상의 사용 가능한 입력 메커니즘은 요소 위로 편리하게 마우스를 가져갈 수 있습니다 */
}

@media (any-pointer: none) {
    /* 사용할 수 있는 포인팅 장치가 없습니다 */
}

@media (any-pointer: coarse) {
    /* 적어도 하나의 입력 메커니즘에는 정확도가 제한된 포인팅 장치가 포함되어 있습니다 */
}

@media (any-pointer: fine) {
    /* 적어도 하나의 입력 메커니즘에 정확한 포인팅 장치 포함되어 있습니다 */
}

테스트

See the Pen mediaQuery PC, MOBILE by FE4902 (@fe4902) on CodePen.

 

해당 포스팅은 이 글을 참고하여 작성했습니다.