집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 미디어 쿼리란 무엇입니까? 사용하는 방법?

CSS의 미디어 쿼리란 무엇입니까? 사용하는 방법?

青灯夜游원래의: 2018-11-09 10:38:207286검색

이 글에서는 미디어 쿼리란 무엇인지 소개합니다. 사용하는 방법? 미디어 쿼리 사용 방법을 모두에게 알려주세요. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

미디어 문의란 무엇인가요? 무슨 소용이 있나요?

미디어 쿼리는 특정 미디어 조건이 충족될 때만 적용되도록 CSS 스타일의 범위를 제한합니다.

간단히 말하면 미디어 쿼리를 사용하면 장치 디스플레이의 특성(예: 뷰포트 너비, 화면 비율, 장치 방향: 가로 또는 세로)에 따라 CSS 스타일을 설정할 수 있습니다.

미디어 쿼리를 사용하여 너비, 높이, 색상 등의 미디어 속성을 감지할 수 있습니다. 미디어 쿼리를 사용하면 페이지 콘텐츠를 변경하지 않고도 특정 출력 장치에 대한 표시 효과를 사용자 지정할 수 있습니다. [추천 관련 영상 튜토리얼: css3 튜토리얼]

미디어 쿼리를 어떻게 사용하나요?

미디어 쿼리는 브라우저의 if-else 문으로 설명할 수 있습니다. 미디어 쿼리는 true 또는 false로 평가되는 논리 표현식입니다. 미디어 쿼리는 선택적 미디어 유형, 0개 이상의 미디어 속성, 더 복잡한 표현을 구성할 수 있는 논리 키워드로 구성됩니다.

1. 기본 구문:

@media [not | only] <media-type> [and] (<media-condition>);

설명:

media-type(미디어 유형)

미디어 유형은 HTML을 표시할 수 있는 광범위한 범주의 사용자 에이전트 장치입니다. 문서. Media Query Level 4 사양에서 미디어 유형 목록이 개정되었습니다. 더 이상 사용되지 않는 미디어 유형은 유효한 것으로 인식되지만 어떤 장치에도 일치하지 않습니다. 즉, 미디어 쿼리는 여전히 적용되지만 미디어 유형이 지정되지 않은 것처럼 모든 장치에 적용됩니다.

다음 미디어 유형을 설정할 수 있습니다.

all: 모든 장치와 일치합니다.

인쇄: 미리보기에서 문서를 표시하는 웹 브라우저 등 인쇄 표시를 재현하는 데 사용되는 프린터 및 장치를 일치시킵니다.

screen: 인쇄 또는 음성과 일치하지 않는 모든 장치와 일치합니다.

음성: 페이지를 "읽는" 스크린 리더 및 유사한 장치와 일치합니다.

media-condition

미디어 조건은 해당 장치에 대한 단일 특정 기능을 설정하므로 미디어 유형보다 더 세부적입니다. 미디어 기능의 구문은 기능 이름, 콜론, 테스트할 값을 포함하여 CSS 속성과 동일합니다.

미디어 기능 목록도 미디어 쿼리 레벨 3에서 미디어 쿼리 레벨 4로 변경되었습니다. 더 이상 사용되지 않는 기능은 이전 버전과의 호환성을 위해 사양에 유지되었지만 새 스타일 시트에서는 사용해서는 안 된다는 점이 강조되었습니다. 사용자 에이전트는 지정된 대로 이를 계속 지원합니다.

다음 미디어 기능을 설정할 수 있습니다:

화면/장치 크기:
너비
키
가로 세로 비율
방향

디스플레이 품질:
해상도
스캔
그리드
업데이트
오버플로 차단
오버플로-인라인

색상:
컬러
색상 지수
흑백
색 영역

상호 작용:
포인터
호버
모든 포인터 및 모든 마우스오버

스크립트:
스크립팅:

2. 미디어 쿼리 사용 예:

CSS 반응형 미디어 쿼리 구현

예:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

설명:

이 미디어 쿼리의 의미는 다음과 같습니다. 화면 너비가 320px~720px 사이이면 미디어 쿼리는 본문의 배경색(배경색:빨간색;)을 설정하여 장치 화면 너비가 320px 미만일 때 이전 본문 배경색과 겹칩니다. 본문 색상(배경색: 파란색;)의 배경을 설정하면 이전 본문 배경색과도 겹칩니다.