이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 미디어 쿼리 업데이트

화면의 새로고침 빈도 기능에 맞게 UI를 조정합니다.

Adam Argyle

CSS 미디어 쿼리는 강력한 이 도구를 사용하면 웹사이트 또는 웹 앱의 디자인을 데이터가 있어야 합니다. 미디어 쿼리를 사용하면 다양한 레이아웃을 지원합니다.

이 update 드림 미디어 쿼리를 사용하면 기기의 새로고침 빈도에 맞게 UI를 조정할 수 있습니다. 이 특성은fastslownone 다양한 장치의 성능이 있습니다.

브라우저 지원

기기 및 화면 재생 빈도

디자인하는 대부분의 기기는 빠른 화면 재생 빈도가 높습니다. 이 여기에는 데스크톱과 대부분의 휴대기기가 포함됩니다.

기기를 쿼리하여 렌더링을 위한 빠른 새로고침 빈도가 있는지 확인할 수 있습니다. 콘텐츠, 그리고 그에 따라 스타일을 지정하면서 단일 스타일시트를 계속 제공할 수 있습니다.

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

eReader 및 저전력 결제 시스템과 같은 기기는 새로고침 빈도 기기가 애니메이션을 처리하지 못하거나 이는 배터리 사용량이나 잘못된 보기 업데이트를 줄일 수 있음을 의미합니다.

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

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

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

다음 CodePen에서 이 새 업데이트 미디어 쿼리: