미디어쿼리 정리

1. 가장 흔하게 사용하는 미디어쿼리 정리입니다.

@media all and (min-width:500px){
  .step1 .form-group .numbers button { font-size: 42px;}
}

all: 모든 장치에 적합합니다.
print: 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
screen: 주로 화면이 대상입니다.
speech: 음성 합성장치 대상입니다.

@media (orientation: portrait) {
  ...
}

모바일에서 세로모드인 경우

@media (orientation: landscape) {
  ...
}

모바일에서 가로모드인 경우

@media (min-height: 680px), screen and (orientation: portrait) {
  ...
}

중복으로 사용할 경우

2. 최적화를 위해

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">

해당 스타일을 사용하는 경우에만 로드할 수 있도록 태그에 media 속성을 명시하여 사용할 수 있다.

3. 디바이스 판단

https://codepen.io/paperblock/pen/wvzrezj

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    ...
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    ...
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    ...
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    ...
}

 

참조: https://paperblock.tistory.com/164

CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features