CSS 미디어 쿼리 업데이트

UI를 화면의 재생 빈도 기능에 맞게 조정합니다.

Adam Argyle

CSS 미디어 쿼리는 웹사이트 또는 웹 앱이 표시되는 기기에 따라 웹사이트 또는 웹 앱의 모양을 제어할 수 있는 강력한 도구입니다. 미디어 쿼리를 사용하면 다양한 화면 크기, 방향, 기타 요소에 따라 다양한 레이아웃을 만들 수 있습니다.

update 미디어 쿼리를 사용하면 UI를 기기의 화면 재생 빈도에 맞게 조정할 수 있습니다. 이 기능은 다양한 기기의 기능과 관련된 fast, slow 또는 none 값을 보고할 수 있습니다.

기기 및 새로고침 빈도

설계하는 대부분의 기기는 화면 재생 빈도가 빠를 수 있습니다. 여기에는 데스크톱과 대부분의 휴대기기가 포함됩니다.

기기를 쿼리하고 콘텐츠 렌더링을 위한 빠른 새로고침 빈도가 있는지 확인한 후 단일 스타일시트를 계속 전송하면서 적절하게 스타일을 지정할 수 있습니다.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

전자책 리더와 저전력 결제 시스템과 같은 기기는 새로고침 빈도가 느릴 수 있습니다. 기기가 애니메이션이나 빈번한 업데이트를 처리할 수 없다는 것을 알면 배터리 사용량이나 잘못된 뷰 업데이트를 줄일 수 있습니다.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

마지막으로 인쇄된 종이 또는 전자잉크 디스플레이와 같이 단일 렌더링 패스만 제공할 수 있는 시나리오가 있습니다. 이러한 출력은 전혀 새로고침할 수 없으며 none라고 합니다. 다음과 같이 쿼리할 수 있습니다.

@media (update: none) {
  /* one time render like printed paper */
}

다음 CodePen에서 이 새로운 업데이트 미디어 쿼리를 사용하여 점진적으로 개선된 마우스 오버 애니메이션을 확인하세요.

추가 리소스

• CSS 미디어 쿼리 수준 4
• MDN의 미디어 쿼리 업데이트