화면의 화면 재생 빈도 기능에 맞게 UI를 조정합니다.
CSS 미디어 쿼리는 표시되는 기기에 따라 웹사이트 또는 웹 앱의 모양을 제어할 수 있는 강력한 도구입니다. 미디어 쿼리를 사용하면 다양한 화면 크기, 방향 및 기타 요소에 따라 다양한 레이아웃을 만들 수 있습니다.
update 미디어 쿼리를 사용하면 기기의 새로고침 빈도에 맞게 UI를 조정할 수 있습니다. 이 기능은 다양한 기기의 기능과 관련된 fast, slow 또는 none 값을 보고할 수 있습니다.
기기 및 새로고침 빈도
디자인에 사용되는 대부분의 기기는 화면 재생 빈도가 빠를 가능성이 높습니다. 여기에는 데스크톱과 대부분의 휴대기기가 포함됩니다.
기기를 쿼리하고 콘텐츠 렌더링을 위한 빠른 새로고침 빈도가 있는지 확인하며 단일 스타일시트를 제공하면서 적절하게 스타일을 지정할 수 있습니다.
@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에서 다음과 같은 새 업데이트 미디어 쿼리를 사용하여 점진적으로 향상된 마우스 오버 애니메이션을 확인합니다.