CSS3 미디어 쿼리에 대한 지식 요약

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

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

2. 반응형 디자인에 미디어 쿼리가 필요한 이유
CSS3의 미디어 쿼리 모듈이 없으면 장치 특성(예: 뷰포트 너비)에 맞는 특정 CSS 스타일을 설정할 수 없습니다

3. CSS 파일에 대한 쿼리

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

4.

준비 1: 메타 태그 설정

우선 미디어를 사용할 때 모바일 기기의 디스플레이 효과와 호환되도록 다음 코드를 설정해야 합니다.

이 코드의 여러 매개변수에 대한 설명:

• width = device-width: The width는 현재 장치의 너비와 같습니다.

• initial-scale: 초기 크기 조정(기본 설정은 1.0)

• minimum-scale: 최소 사용자는 배율로 확대/축소할 수 있습니다(기본값은 1.0)

• maximum-scale: 사용자가 확대/축소할 수 있는 최대 배율(기본값은 1.0)

• user-scalable: 사용자가 수동으로 확대/축소할 수 있습니다(기본값은 no). 사용자가 페이지를 확대하거나 축소하는 것을 원하지 않기 때문입니다.

준비 2: JS 호환 파일 로드

IE8은 HTML5나 CSS3 미디어를 지원하지 않기 때문에, 따라서 호환성 효과를 얻기 위해 코드를 작성하려면 두 개의 JS 파일을 로드해야 합니다. /oss.maxcdn.com/libs/html5shiv/3.7 .0/html5shiv.js?1.1.11">

 

3. 준비 3: IE 렌더링 모드를 가장 높은 기본값으로 설정합니다(일부 부분을 추가할지 여부를 선택할 수 있습니다)
4. 이제 많은 사람들의 IE 브라우저가 IE9 이상으로 업그레이드되었으므로 이때 이상한 일이 많이 발생합니다. 지금은 IE9 브라우저이지만 브라우저는 IE8입니다.

이 상황을 방지하려면 IE의 문서 모드를 항상 최신 상태로 만들기 위해 다음 코드가 필요합니다.

< Meta http-equiv=" "

이 코드 뒤에

chrome=1

을 추가했습니다. 이

Google Chrome 프레임(Google Embedded Browser Framework GCF)

, 일부 사용자가 자신의 컴퓨터에 이 Chrome 플러그인을 설치한 경우, IE의 버전에 관계없이 조판 및 계산을 위해
1. Webkit

   엔진과 V8 엔진을 사용할 수 있는데, 이는 사용자가 이 플러그인을 설치하지 않으면 매우 강력합니다. , 이 코드는 IE가 가장 높은 문서 모드로 표시되도록 합니다. 나는 여전히 이 코드를 사용하는 것을 권장하지만 이 코드 없이도 사용할 수 있습니다.

2.
2. CSS 파일에 CSS 반응형 미디어 쿼리를 작성하는 방법
   예: 다양한 너비에 따라 스타일 변경

HTML:

• John Doe< /li>
• Mary Moe
• Amanda Panda
너비가 500픽셀 미만 e@Media 화면 및 (최대 너비: 500px) { UL & GT ; 리 {

배경: 파란색 ㅋㅋㅋ                                 500-700픽셀

@media 화면 및 (최대 너비:700px) 및 (최소 너비:501px) {
                           >
// 너비는 700~1000픽셀
@media 화면 및 (최대 너비:1000px) 및 (최소 너비:701px) 배경: 자두;
                                     ~ + ~ ~ > : 22px;
한마디로 @media에는 ​​세 가지 주요 사항이 있습니다.
1. 메타 태그;
2, IE와 호환 가능, @media 화면 및 (최대 너비: 980px){}(샘플 스타일)

위 내용은 CSS3 미디어 쿼리에 대한 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!