CSS는 반응형 디자인을 위해 @media 미디어 쿼리를 사용합니다.

인터넷의 발달로 스마트폰, 태블릿 등 다양한 모바일 기기를 어디서나 볼 수 있게 되었습니다. 그렇다면 다양한 모바일 기기에서 우리 웹사이트를 어떻게 적절하게 배치할 수 있을까요? 각 장치에 대한 코드 세트를 작성하는 것은 번거롭고 많은 작업이 필요합니다. 그런 다음 똑똑한 프로그래머는 일련의 코드를 사용하여 웹 사이트가 다양한 크기의 장치에 합리적으로 표시되도록 합니다. 그래서 반응형 디자인 모델이 탄생했고, 그 핵심은 '미디어 쿼리'다.

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

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

@media 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있습니다. @media는 다양한 화면 크기에 대해 다양한 스타일을 설정할 수 있습니다. 특히 반응형 페이지를 설정해야 하는 경우 @media는 매우 유용합니다. 브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다.

2. @media 미디어 쿼리

a 사용. 모바일 장치의 표시 효과와 호환되도록 html 문서에 다음 코드를 추가하세요

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

width=device-width: 너비는 현재 장치의 너비
initial-scale=1: 초기 크기 조정 비율(기본값은 1)
maximum-scale=1: 사용자가 최대 비율로 확대/축소할 수 있도록 허용(기본값은 1)
user-scalable=no: 사용자가 수동으로 확대/축소할 수 없음 Zoom

b. CSS 파일에 반응형 미디어 쿼리 작성

기본 구문: @media 미디어 유형 및 (미디어 특성) {style}

예 1:

@media screen and (max-width:480px){
body {
background:red
  }
}

의미: 화면이 480px보다 작거나 같을 때 페이지의 배경색이 빨간색으로 변합니다.

예 2:

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

의미: 화면이 900px 이상이면 페이지의 글꼴 크기가 20px이 됩니다.

예 3:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

의미: 화면이 600px~900px 사이일 때 본문의 배경색은 "#f5f5f5"입니다.

요약: 위는 미디어 쿼리 @media가 무엇인지 소개하고 미디어 쿼리 사용 방법에 대한 예를 제공합니다.

위 내용은 CSS는 반응형 디자인을 위해 @media 미디어 쿼리를 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!