CSS3의 미디어 쿼리란 무엇입니까?

이 기사에서는 CSS3의 미디어 쿼리에 대한 소개를 공유할 것이며 이는 특정 참조 가치가 있으며 모든 사람의 학습에 도움이 되기를 바랍니다.

요즘 반응형 웹 디자인이 점점 더 대중화되고 있지만, 반응형 디자인은 로딩 속도가 느린 등 그 자체로 몇 가지 문제도 안고 있습니다. 하지만 이제 이 문제를 아주 잘 해결할 수 있는 방법이 있습니다. 미디어 쿼리 방법을 사용하여 스타일을 다양한 장치에 적용하는 문제를 해결할 수 있습니다. 다음으로 기사에서 자세히 소개하겠습니다.

【추천 강좌: CSS3 Tutorial】

Media Query

사용자 기기의 크기에 따라 다양한 스타일을 호출할 수 있는 CSS3의 미디어 쿼리입니다. 가장 일반적으로 사용되는 쿼리는 뷰포트 높이와 너비를 처리하는 쿼리입니다.

미디어 쿼리는 다음과 같은 용도로 사용할 수 있습니다.

(1) CSS @media 및 at-rules를 사용하여 조건부로 스타일을 적용합니다.

(2) 특정 미디어에 대한 , 및 기타 HTML 요소.

(3) 미디어 상태를 테스트하고 모니터링하려면 Window.matchMedia() 및 JavaScript 메서드를 사용하세요.

미디어 유형

all: 모든 기기에서 작동합니다.

인쇄: 인쇄 미리보기 모드에서 화면에 표시된 페이지가 매겨진 자료 및 문서에 사용됩니다.

screen: 주로 화면에 적합합니다.

speech: 주로 음성 합성기에 적합합니다.

미디어 기능

공간 문제로 인해 미디어 쿼리 기능 중 일부만 보여드립니다.

이름	설명
width	시각화 너비
height	시각화 높이
가로세로 비율	뷰포트 종횡비 종횡비
방향	The 뷰포트 방향
solution	출력 장치의 픽셀 밀도
선호-감소-투명도	투명도 설정
grid	장치가 그리드를 사용할지 비트맵 화면을 사용할지 여부
업데이트	출력 장치가 콘텐츠의 모양을 수정하는 빈도
overflow-block	출력 장치가 블록 축을 따라 뷰포트를 오버플로하는 콘텐츠를 처리하는 방법
overflow-inline	스크롤 가능 인라인 축을 따라 오버플로됨 뷰포트의 콘텐츠

예:

및 키워드를 사용하여 미디어 기능을 미디어 유형 또는 기타 미디어 기능과 결합할 수 있습니다(예: 너비가 다음인 가로 장치로 스타일을 제한). 최소 30em 길이

@media (min-width: 30em) and (orientation: landscape) { ... }

예:

<style>

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

위의 예는 페이지가 960px 미만일 때 페이지가 분홍색으로 변한다는 것을 나타냅니다.

max-width: 미만일 때의 최대 너비를 나타냅니다. 이 너비에 대해 다음 함수가 호출됩니다.

Rendering

요약: 위 내용은 이 글의 전체 내용입니다. 이 글을 통해 모든 분들이 미디어 문의에 대해 어느 정도 이해하실 수 있기를 바랍니다.

위 내용은 CSS3의 미디어 쿼리란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!