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

CSS 미디어 쿼리의 용도는 무엇입니까?

王林원래의: 2020-11-24 11:46:074021검색

CSS 미디어 쿼리의 역할: 미디어 쿼리를 사용하면 뷰포트 너비, 화면 비율, 장치 방향 등과 같은 특성을 기반으로 장치 디스플레이에 대한 CSS 스타일을 설정할 수 있습니다. 미디어 쿼리는 미디어 유형과 하나 이상의 감지로 구성됩니다. 미디어 특성으로 구성된 조건식입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

(동영상 공유 학습: css 동영상 튜토리얼)

CSS 미디어 쿼리의 역할:

1. 미디어 쿼리란 무엇입니까?

미디어 쿼리를 사용하면 장치 디스플레이의 특성(예: 뷰포트 너비, 화면 비율, 장치 방향: 가로 또는 세로)에 CSS 스타일을 설정하는 경우 미디어 쿼리는 미디어 유형과 미디어 특성을 감지하는 하나 이상의 조건식으로 구성됩니다. 미디어 쿼리에서 감지할 수 있는 미디어 속성은 width , height , color 등입니다. 미디어 쿼리를 사용하면 페이지 콘텐츠를 변경하지 않고도 특정 출력 장치에 대한 표시 효과를 사용자 지정할 수 있습니다.

2. CSS 파일에 미디어 쿼리를 도입하는 방법

미디어 쿼리는 CSS 스타일 코드 끝에 작성됩니다. CSS는 동일한 특성 하에서 이후 스타일이 이전 스타일과 겹칩니다.

3. 미디어 사용 방법

모바일 장치의 디스플레이 효과와 호환되도록 html 문서에 다음 코드를 추가해야 합니다

<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

ps:

width=device-width: 너비는 현재 장치의 너비

initial-scale =1: 초기 확대 비율(기본값은 1)

maximum-scale=1: 사용자가 최대 비율로 확대할 수 있도록 허용(기본값은 1)

user-scalable=no: 사용자는 수동으로 확대/축소할 수 없습니다.

4. CSS 파일에 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;
       }
}

ps:

이 미디어 쿼리의 의미는 다음과 같습니다. 장치 화면 너비가 320px-720px 사이이면 배경이 미디어 쿼리의 본문 색상(배경색:빨간색;)은 이전 본문 배경색과 겹칩니다. 장치 화면 너비가 320px 미만인 경우 미디어 쿼리의 본문 배경색(배경색:파란색) ;) 이전 본문 배경색과 겹칩니다.

CSS 미디어 쿼리의 용도는 무엇입니까?

관련 기사