화면의 새로고침 빈도 기능에 맞게 UI를 조정합니다.
CSS 미디어 쿼리는 강력한 이 도구를 사용하면 웹사이트 또는 웹 앱의 디자인을 데이터가 있어야 합니다. 미디어 쿼리를 사용하면 다양한 레이아웃을 지원합니다.
이
update
드림
미디어 쿼리를 사용하면 기기의 새로고침 빈도에 맞게 UI를 조정할 수 있습니다. 이
특성은fast
slow
none
다양한 장치의 성능이 있습니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
기기 및 화면 재생 빈도
디자인하는 대부분의 기기는 빠른 화면 재생 빈도가 높습니다. 이 여기에는 데스크톱과 대부분의 휴대기기가 포함됩니다.
기기를 쿼리하여 렌더링을 위한 빠른 새로고침 빈도가 있는지 확인할 수 있습니다. 콘텐츠, 그리고 그에 따라 스타일을 지정하면서 단일 스타일시트를 계속 제공할 수 있습니다.
@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에서 이 새 업데이트 미디어 쿼리: