css3@media 媒体查询的使用(一)

    媒体查询是向不同设备提供不同样式的一种不错的方式,它为每种类型的用户提供了更佳的体验效果,要使用媒体查询来制作网页,首先需要学习3个属性:媒体类型、媒体特性和关键词。

    1、媒体类型

    媒体类型(Media Type)在css2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式。

    在css2中W3C共列出了10种媒体类型

设备类型
all 所有设备
braille 盲文触觉回馈设备
embossed 盲文打印机
handheld 便携设备
print 打印用纸或打印预览视图
projection 投影设备
screen 电脑显示器
speech 语音或音频合成器
tv 电视机设备
tty 使用固定密度字母栅格的媒介,如电传打字机和终端
    媒体类型有近10种之多,但在企业中常用的就是all、screen、print。其中引入方式常用的有两种,

    (1)  @media 方式

        使用@media的方式引入,@media 是 css3 中新引入的一个特性,称为媒体查询。

        语法:

@media 媒体类型 {
    选择器{
        /*这里写样式代码*/
    }
}

    (2) link标签引入

<link rel="stylesheet" href="style.css" media="媒体类型">
除了@media 和 link 外,还可以使用 @import、xml 等方式来引入媒体类型。



    2、媒体特性

    媒体特性(Media Query) 是css3 对媒体类型(Media Type)的增强版、其实可以将Media Query 看成“Media Type(判断条件) + css (符合条件的样式规则)”。

    W3C 给出的常用特性如下表。

属性 min/max 描述
device-width length Yes
设置屏幕的输出宽度
device-height
length
Yes
设置屏幕的输出高度
width length
Yes
渲染界面的宽度
height length
Yes
渲染界面的高度
orientation portrait/landscape Yes
横屏或竖屏
resolution 分辨率(dpi/dpcm) Yes
分辨率
color 整数 Yes
每种色彩的字节数
color-index 整数 Yes
色彩表中的色彩数
    到目前为止,css3 Media Query 得到了众多浏览器的支持,除了ie6~ie8浏览器不支持。还有一点与众不同的是Media Query 不需要像其他除css3属性一样在不同的浏览器中添加前缀。

    Media Query 能在不同的条件下使用不同的样式,使页面在不同终端设备下达到不同的渲染效果。Media Query 的语法如下:

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

    使用Media Query 时必须使用@media 开头,然后指定媒体类型和媒体特性。媒体特性的书写方式和样式的书写方式非常相似,如:(max-width:768px)

    将上特性表中组合就类似于不同的css集合,但于css属性不同的是,媒体特性是通过min/max来表示大于、等于或小于作为逻辑判断,而不是只用小于号 < 和大于号 > 来判断。

    3、关键词

    媒体特性有的时候不止一条,当出现多个条件的是候,就需要通过关键词连接。

    (1)    and关键词,表示同时满足这两者时生效,到达限定范围,如:

@media screen and (max-width: 1200px){/*样式代码*/}

   上面代码表示的是,样式代码将被使用在电脑显示器和屏幕小于1200px的所有设备中。


    (2)    only 关键词,用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器,其实only很多时候用来对不支持Media Query 却支持 Media Type 的设备隐藏样式表,例如:ie8能成功解读媒体类型,但是却无法解读 and 后面的媒体特性语句,就会连带媒体类型一起忽略。为了让不识别媒体特性的浏览器依然识别媒体类型,可以使用only关键词进行选择,如:

<link rel="styleheet" href="style.css" media="only screen and (max-width: 760px)" />


    (3)    not 关键词,用来排除某种指定的媒体类型,也就是排除符合表达式的设备,如:

@media not print and (max-width: 1200px) {/*样式代码*/}
上面代码表示的是,样式代码将被使用在除打印机设备和屏幕小于1200px外的所有设备中。


分享

下一篇:没有了

发表评论

提交评论

清空信息
关闭评论

评论列表

av atar
苏晨 2018-10-04 15:11:04
回复
@前端共享博客 :路过,支持下
face
 Windows 7   Chrome 68.0.3440.84
av atar
前端共享博客 2018-10-04 15:01:56
回复
路过,支持下
 vivo   Chrome 57.0.2987.132
av atar
小罗 2018-10-04 02:08:20
回复
face好羞射,文章真的好赞啊,顶博主!
 Windows 10   Chrome 68.0.3440.75