CSS3 미디어에 대해 자세히 알아보기

css3 미디어

미디어 유형 미디어 유형

미디어 유형은 CSS2에서 매우 유용한 속성입니다. 미디어 유형을 사용하면 다양한 장치에 대해 다양한 스타일을 지정할 수 있습니다.
W3C는 표와 같이 총 10가지 미디어 유형을 나열합니다.

值	设备类型
all	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打字机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
TV	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

그 중 스크린, 전체, 인쇄가 가장 일반적인 세 ​​가지 미디어 유형입니다.

미디어 유형 참조 방법

1. 링크 방법: <link> 태그가 스타일을 참조할 때 미디어 유형을 도입하고 이를 통해 지정합니다. 미디어 속성 다양한 미디어 유형.

   <link>

2. xml 방식: 링크에서 소개하는 미디어 유형과 유사하며, 미디어 속성을 통해서도 지정됩니다.

   <?xml-stylesheet  type="text/css" media="screen" href="style.css">

3. @import方法: @import는 스타일 파일을 참조하는 방법 중 하나이며, 유형을 참조하는 데에도 사용할 수 있습니다. @import미디어 유형을 소개하는 방법은 크게 두 가지입니다.

   하나는 스타일 파일의 @import을 통해 다른 파일을 호출하는 것입니다.

   @import url(style.css) screen;

   다른 하나는

   <style>
       @import url(style.css) screen;
   </style>

4. @media方法: @media는 미디어 쿼리라는 CSS3에 새로 도입된 기능입니다. 이 속성을 통해 미디어 유형을 페이지에 도입할 수 있습니다. @import과 비슷하게 2가지 종류가 있습니다.

   하나는 스타일 파일의 @media을 통해 미디어 유형을 참조하는 것입니다.

   @media screen{
       选择器{/*样式*/}
   }

   다른 하나는

   <style>
       @media screen{
           选择器{/*样式*/}
       }
   </style>

위 4가지 방법은 모두 참조 미디어 유형이 가능하며 첫 번째와 네 번째 방법을 사용하는 것이 좋습니다.

미디어 쿼리 미디어 속성

미디어 속성은 CSS3 미디어 유형의 향상된 버전입니다.
W3C는 표에 표시된 것처럼 CSS3에서 일반적으로 사용되는 13가지 기능을 나열합니다.

属性	值	Min/Max	描述
color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数
device-aspect-ratio	整数/整数	Yes	宽高比例
device-height	Length	Yes	设备屏幕的输出高度
device-width	Length	Yes	设备屏幕的输出宽度
grid	整数	No	是否基于栅格的设备
height	Length	Yes	渲染页面的高度
monochrome	整数	Yes	单色帧缓冲器中每像素字节
resolution	分辨率(dpi/dpcm)	Yes	分辨率
scan	Progressive interlaced	No	Tv媒体类型的扫描方式
width	Length	Yes	渲染界面的宽度
orientation	portrait/landsscape	No	横屏或竖屏

Media Query使用方法

@media 媒体类型 and (媒体特性){/*样式*/}

　　使用Media Query时必须要使用@media开头，然后指定媒体类型，随后是指定媒体特性。

1. 最大宽度max-width

   max-width是媒体特性中最常用的一个特性，意思是指媒体类型小于或等于指定的宽度时，样式生效。

   @media screen and (max-width:480px){
       p{
           width:400px;
       }
   }

   意思是当屏幕小于或等于480px时，p的宽度被重置为400px。

2. 最小宽度min-width

   min-width与max-width相反，即媒体类型大于或等于指定宽度时，样式生效。

   @media screen and (min-width:900px){
       p{width:900px;}
   }

   当最小宽度等于或大于900px时，p的宽度重置为900px

3. 多个媒体特性使用

   Media Query可以使用关键词“and”将多个媒体特性结合在一起。

   @media screen and (min-width:400px) and (max-width:600px){
       p{
           background:red;
       }
   }

   当屏幕宽度在400px~600px时，p的背景色变为红色。

4. 设备屏幕的输出宽度Device width

   还可以根据屏幕尺寸设置相应的样式

   <link>

   样式适用于最大宽度为500px，这里的max-device-width所指的是实际分辨率，也就是指可视面积分辨率。

5. not关键词

   关键词not用来排除某种制定的媒体类型，也就是说对后面的表达式执行取反操作。

   @media not print and (max-widht:1200px){/*样式*/}

   样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

6. only关键词

   only用来指定某种特定的媒体类型，可以排除不支持媒体查询(Media Query)的浏览器。only很多时候是用来对不支持Media query却支持Media Type的设备隐藏样式表。因此支持媒体特性的设备正常调用样式，此时就当only不存在；不支持媒体特性但支持媒体类型的设备，就不会读取样式，因为先读取的是only而不是screen；不支持Media Query的浏览器，不论是否支持only，样式都不会被采用。

   <link>

CSS3 媒体特性完。

위 내용은 CSS3 미디어에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!