CSS 미디어 쿼리 업데이트
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
화면의 새로고침 빈도 기능에 맞게 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에서
이 새 업데이트 미디어 쿼리:
추가 리소스
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2023-04-26(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2023-04-26(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2023-04-26(UTC)"],[],[]]