기본(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.
해당 포스팅은 이 글을 참고하여 작성했습니다.
'HTML·CSS' 카테고리의 다른 글
[CSS] :has() (0) | 2023.07.12 |
---|---|
[CSS] iOS border-radius + overflow: hidden 이슈 (0) | 2023.05.11 |
[CSS] input 태그 자동완성 사용시 스타일이 변경되는 이슈 (0) | 2023.05.01 |
[CSS] 이미지 흐림 현상 (0) | 2023.04.28 |
[CSS] border-width가 변경될 때 레이아웃이 틀어지는 이슈 (0) | 2023.04.23 |