미디어 쿼리는 CSS3의 새로운 속성입니까?

미디어 쿼리는 "@media" 쿼리를 사용하여 페이지의 반응형 디자인에 사용할 수 있는 CSS3의 새로운 기능으로, 다양한 미디어 유형에 대해 실패한 스타일을 정의하는 데 사용할 수 있으며 다양한 미디어 유형에 대해 다른 스타일을 설정할 수도 있습니다. 화면 크기 스타일의 경우 구문은 "@media [미디어 매체] 및|또는 (조건) 및|또는 (조건){스타일}"입니다.

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

미디어 쿼리는 CSS3의 새로운 속성인가요?

1. 미디어 쿼리는 페이지의 반응형 디자인에 사용할 수 있는 CSS3의 새로운 기능입니다.

2. 다양한 스타일의 여러 세트를 다양한 화면과 해상도에 맞게 디자인할 수 있습니다.

미디어 쿼리 구문

@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}

@media 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있습니다.

@media는 다양한 화면 크기에 맞게 다양한 스타일을 설정할 수 있습니다. 특히 반응형 페이지를 설정해야 하는 경우 @media는 매우 유용합니다.

브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다.

CSS 구문

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not, and, and는 복잡한 미디어 쿼리를 공동으로 구성하는 데에만 사용할 수 있으며, 여러 미디어 쿼리를 쉼표로 구분하여 단일 규칙으로 결합할 수도 있습니다.

not, only and 키워드 의미:

• not: not 연산자는 미디어 쿼리를 부정하는 데 사용됩니다. 이 조건이 충족되지 않으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 쉼표로 구분된 쿼리 목록에 있는 경우 해당 쿼리가 적용되는 특정 쿼리만 무효화됩니다. not 연산자를 사용하는 경우 미디어 유형도 지정해야 합니다.

• only: only 연산자는 전체 쿼리가 일치하는 경우에만 스타일을 적용하는 데 사용되며 이전 브라우저가 선택한 스타일을 적용하지 못하도록 방지하는 데 유용합니다. only를 사용하지 않는 경우 이전 브라우저는 단순히 화면 및 (최대 너비: 500px)을 화면으로 해석하고 나머지 쿼리를 무시하고 해당 스타일을 모든 화면에 적용합니다. only 연산자를 사용하는 경우 미디어 유형도 지정해야 합니다.

• , (쉼표) 쉼표는 여러 미디어 쿼리를 단일 규칙으로 결합하는 데 사용됩니다. 쉼표로 구분된 목록의 각 쿼리는 다른 쿼리와 별도로 처리됩니다. 따라서 목록의 쿼리 중 하나라도 true이면 전체 미디어 설명이 true를 반환합니다. 즉, 목록은 논리 or 연산자처럼 동작합니다.

• and: 및 연산자는 여러 미디어 쿼리 규칙을 단일 미디어 쿼리로 결합하는 데 사용됩니다. 각 쿼리 규칙이 true인 경우 미디어 쿼리는 미디어 유형과 함께 결합하는 데에도 사용됩니다.

미디어 유형은 장치의 일반적인 범주를 설명합니다. not 또는 only 논리 연산자를 사용하지 않는 한 미디어 유형은 선택 사항이며 all 유형은 (암시적으로) 적용됩니다.

다른 미디어에 대해 다른 스타일 파일을 사용할 수도 있습니다:

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

(비디오 공유 학습: css 비디오 튜토리얼, html 비디오 튜토리얼)

위 내용은 미디어 쿼리는 CSS3의 새로운 속성입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!