当前位置:Gxlcms > html代码 > css3媒体记_html/css_WEB-ITnose

css3媒体记_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:14人阅读

css3 媒体

Media Type 媒体类型

  W3C共列出十种媒体类型,如表:

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

  其中screen,all,print为最常见的三种媒体类型。

媒体类型的引用方法

  1. link方法:在标签引用样式的时候引入媒体类型,通过media属性指定不同的媒体类型。

  2. xml方法:与link引入媒体类型类似,也是通过media属性来指定。

  3. @import方法:@import是用来引用样式文件的方法之一,同样可以用来引用类型。@import引入媒体类型主要有两种方式。

    一种是在样式文件中通过@import调用另一个文件;

    @import url(style.css) screen;

    另一种是在标签

  4. @media方法:@media是CSS3中新引进的特性,称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与@import类似,也有两种类型。

    一种是在样式文件中通过@media引用媒体类型;

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

    另一种是在标签

以上四种方法都可以引用媒体类型,推荐使用第一种与第四种。

Media Query媒体特性

  W3C共列出13种CSS3中常用的特性,如表:

属性 值 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){	div{		width:400px;	}}

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

  2. 最小宽度min-width

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

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

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

  3. 多个媒体特性使用

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

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

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

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

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

     

    样式适用于最大宽度为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,样式都不会被采用。

人气教程排行