CSS3에서 미디어 쿼리의 문법적 구성은 무엇입니까?

미디어 쿼리의 구문은 "@media not|only mediatype and (expressions) {CSS code...;}"입니다. 미디어 쿼리는 여러 미디어로 구성될 수 있으며 표현식은 하나 이상을 기반으로 합니다. 조건 true인 경우 true 또는 false를 반환합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3의 멀티미디어 쿼리는 CSS2 멀티미디어 유형의 모든 아이디어를 상속합니다. 즉, 장치 유형을 찾는 대신 CSS3는 설정에 따라 적응적으로 표시합니다.

미디어 쿼리를 사용하면 다음과 같은 다양한 항목을 감지할 수 있습니다.

• 뷰포트(뷰포트) 너비 및 높이

• 장치 너비 및 높이

• 방향(스마트폰 가로, 세로)

• 해상도

현재 Apple 휴대폰, Android 휴대폰, 태블릿 등과 같은 많은 장치에서 멀티미디어 쿼리를 사용합니다.

쿼리 구문

@media not|only mediatype and (expressions) {
    CSS 代码...;
 }

멀티미디어 쿼리는 다양한 미디어로 구성되며 하나 이상의 표현식을 포함할 수 있습니다. 표현식은 조건이 true인지 여부에 따라 true 또는 false를 반환합니다.

Media Type

지정된 멀티미디어 유형이 장치 유형과 일치하면 쿼리 결과는 true를 반환하고 문서는 일치하는 장치에 지정된 스타일 효과를 표시합니다.

not 또는 only 연산자를 사용하지 않는 한 모든 스타일은 모든 장치에 표시되도록 조정됩니다.

값	Description
all	for 모든 미디어 장치
print	for 프린터
screen	컴퓨터 화면, 태블릿, 스마트폰 등
speech	화면 판독기용

미디어 기능

Value	Description
aspect-r atio	출력 장치에 표시되는 페이지를 정의합니다. 영역 너비에서 높이
color	는 각 출력 장치 세트의 컬러 원본 수를 정의합니다. 컬러 장치가 아닌 경우 값은 0
color-index	출력 장치의 색상 조회 테이블에 정의된 항목 수입니다. 색상 조회 테이블을 사용하지 않는 경우 값은 0과 같습니다.
device-aspect-ratio	출력 장치의 화면 표시 너비와 높이의 비율을 정의합니다.
device-height	출력 장치 화면의 가시 높이를 정의합니다.
device-width	출력 장치 화면의 가시 너비를 정의합니다.
height	출력 장치에서 페이지의 표시 영역 높이를 정의합니다.
max-aspect-ratio	출력 장치 화면의 가시 너비와 높이의 최대 비율을 정의합니다.
max-color	각 출력 장치 그룹의 최대 컬러 원본 수를 정의합니다.
max-color-index	출력 장치의 색상 조회 테이블에 있는 최대 항목 수를 정의합니다.
max-device-aspect-ratio	출력 장치 화면의 가시 너비와 높이의 최대 비율을 정의합니다.
max-device-height	출력 장치의 화면에 표시되는 최대 높이를 정의합니다.
max-device-width	출력 장치 화면의 최대 표시 너비를 정의합니다.
max-height	출력 장치에서 페이지의 최대 가시 영역 높이를 정의합니다.
max-solution	장치의 최대 해상도를 정의합니다.
max-width	출력 장치에서 페이지의 최대 표시 영역 너비를 정의합니다.
min-device-width	출력 장치 화면의 최소 표시 너비를 정의합니다.
min-device-height	출력 장치 화면의 최소 표시 높이를 정의합니다.
min-height	출력 장치에서 페이지의 최소 표시 영역 높이를 정의합니다.
min-width	출력 장치에서 페이지의 최소 표시 영역 너비를 정의합니다.
orientation	출력 장치에서 페이지의 표시 영역 높이가 너비보다 크거나 같은지 정의합니다.
solution	장치의 해상도를 정의합니다. 예: 96dpi, 300dpi, 118dpcm
width	은 출력 장치에서 페이지의 가시 영역 너비를 정의합니다.

예를 들어
화면 너비는 480px보다 크고 글꼴 크기는 16px로 설정되어 있습니다.

@media screen and (min-width: 480px) {
    body {
       font-size:16px;
    }
}

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

위 내용은 CSS3에서 미디어 쿼리의 문법적 구성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!