CSS3에서 @media의 실제 사용에 대한 자세한 설명

이 튜토리얼에서는 CSS3에서 @media의 실제 사용을 자세히 설명합니다.

구문:

CSS 코드는 콘텐츠를 클립보드에 복사합니다.

@media ：<sMedia> { sRules }

값:

<sMedia>：
    指定设备名称。
{sRules}：
    样式表定义。

설명:

다양한 프리젠테이션을 달성하기 위한 미디어(객체) 유형을 결정합니다. 이 기능을 사용하면 CSS가 다양한 미디어 유형과 동일한 미디어의 다양한 조건(해상도, 색상 번호 등)에서 더 정확하게 작동할 수 있습니다.

다음과 같이 코드를 복사하세요.

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome 
| resolution | min-resolution | max-resolution
| scan | grid

일반적인 작성 방법 :

CSS 코드는 내용을 클립보드

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/  
  .class {   
    background: #ccc;   
  }   
}

@media 화면에 복사하는데 이것이 가장 일반적인 작성 방법이며, 제한된 화면이 그 뒤를 따릅니다. size

all and only로 쓰기

일반적으로 all and only가 같이 등장

CSS 코드는 콘텐츠를 클립보드에 복사합니다

@media all and (min-width:xxx) and (max-width:xxx){   
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/  
}

@media only screen and (min-width:xxx) and (max-width:xxx){   
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/  
}   
device-aspect-ratio

device-aspect-ratio는 특정 화면 종횡비를 가진 장치에 적응하는 데 사용할 수 있으며 이는 매우 유용한 유용한 속성이기도 합니다. 예를 들어, 우리 페이지에서는 가로 세로 비율이 4:3인 일반 화면에 대한 스타일을 정의한 다음 적응형 너비 및 고정 너비와 같은 16:9 및 16:10의 와이드스크린에 대한 다른 스타일을 정의하려고 합니다.

사용법:

CSS 코드는 콘텐츠를 클립보드에 복사합니다.

@media only screen and (device-aspect-ratio:4/3)

위는 CSS3 콘텐츠에서 @media의 실제 사용에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!