媒体查询

        Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效 果。前面简单的介绍了Media Queries如何引用到项目中,但Media Queries有其自己的使用规则

@media 媒体类型and (媒体特性)

注:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型), 随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主 要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间 使用冒号分隔。

1. max-width 最大宽度

2. min-width 最小宽度

3. 多个媒体特性使用

@media screen and (min-width:600px) and (max-width:900px){

body{background-color:#f5f5f5;}

}

4. 设备屏幕的输出宽度

         在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的 样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者 “max-device-width”。 

5. not 关键词

        使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not 关键词表示对后面的表达式执行取反操作,如:

@media not print and(max-width:1200px)

6. only 关键词

        only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来 对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性的设 备,正常调用样式,此时就当only不存在;表示不支持媒体特性但又支持媒体类型的设备,这样就会不 读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持 only,样式都不会被采用。如 :

<link rel="stylesheet"media="only screen and (max-device-width:240px)" href="android240.css"/>

在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<link rel="stylesheet"media="(min-width:701px) and (max-width:900px)" href="mediu.css"/> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值