미디어 쿼리가 무엇인지 소개합니다.

미디어 쿼리 학습의 핵심은 무엇인가요?

(추천 튜토리얼: html 동영상 튜토리얼)

다른 기기에서 페이지의 정상적인 미리보기를 구현하려면 [현재 기기를 판단하세요]

미디어 유형

will 다양한 장치는 다양한 유형으로 구분됩니다.

all(모든 장치)

print(인쇄 장치)

화면(컴퓨터 화면, 태블릿, 스마트폰)

미디어 특성

장치를 설명하는 데 사용됩니다. 너비, 높이 등의 기능...

width 웹 페이지 표시 영역이 설정된 너비

height와 완전히 동일합니다. 웹 페이지 표시 영역이 설정된 높이

max-width / max-height와 완전히 동일합니다. 웹 페이지 표시 영역이 설정된 너비보다 작거나 같습니다

min-width / min-width 웹 페이지 표시 영역이 설정된 너비보다 크거나 같습니다

방향: 세로(세로 화면 모드) 가로(가로) | 화면 모드)

구문 키워드

목적은 미디어 유형 및 미디어 속성을 원피스에 연결하고 장치 검색을 수행

하며 여러 미디어 기능을 원피스에 연결할 수 있으며 이는 특정 미디어와 동일하며

제외되지 않습니다. 기능은 생략할 수 있는 non과 동일합니다

생략할 수 있는 특정 미디어 유형만 지정합니다

Grammar

외부 구문

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

- 内嵌式语法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      备注: 多个条件联写
      @media only screen and (width: 320px) and (height: 568px) {}

관련 권장 사항: html 튜토리얼

위 내용은 미디어 쿼리가 무엇인지 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!