CSS3: Media Queries_html/css_WEB-ITnose
语法
应用Media Queries有下面三种方式:
1. 在引入css文件时使用 media 属性
2. 在css文件中使用 @import 指令
@import url('file.css') logic media and (expression);
3. 在css文件中使用 @media 指令
@media logic media and (expression) { rules }
当设备环境符合 logic media and (expression) 描述时,相应的css会生效或者被应用。第一种情况,整个file.css会生效;第二种情况,整个file.css会生效;第三种情况,大括号内的所有css生效。
logic取值可以为not, only。
media代表媒体类型,最常使用的是screen, print,分别代表屏幕环境和打印环境,默认为all。
expression为设备特征的判断,比如height, width等,下文会细说。
/* 在打印环境下,print.css生效 *//* notprint.css作用于非打印环境下 */@import url('notprint.css') not print;/* 仅当在屏幕环境下并且窗口大小至少为1000px时,相应的css生效 */@media only screen and (min-width: 1000px) { #example { background-color: red; }}/* 多条媒体查询用,分隔 */@media screen, print { #example { background-color: red; }}
Media Features
上文中的expression即为Media Features表达式,用来描述设备的特征,语法为 @media (feature: value) { rules } 。feature代表特征名,value为其值,例子见上文。
下面是Media Queries提供的所有Features,笔者已按实用性将其排序。
Width and Height
代表网页渲染窗口的宽度和高度,即浏览器显示区域的大小。
@media (width: 600px) { rules }
特征值同时支持max-和min-前缀,例如:
@media (max-width: 480px) { rules }@media (min-width: 640px) { rules }
Pixel Ratio
像素比或分辨率,这里Pixel Ratio其实为Device Piexel Ratio(DPR),意为设备物理像素点与逻辑像素点的比值。
比如iPhone 5S,物理分辨率为640*1136,但其CSS分辨率为320*568。也就是说,它的逻辑分辨率为320*568,DPR为2,即两个水平物理像素点和两个垂直物理像素点,构成一个逻辑像素点。
图1:DPR 1(左),DPR 2(中),DPR 3(右)
在大多数情况下,开发人员都不需要关心设备的物理分辨率,文字和矢量图都会表现良好,但是非矢量图在高分屏下会出现严重的失真。一张普通的图片,在DPR为2的设备上,就相当于图片放大了2倍,用户能明显感觉模糊。
这时候,Media Queries就派上了用场,可以用此语法来判断设备的DPR @media media and (resolution: value) { rules } 。
value的单位有:dots per inch(DPI), dots per centimeter(DPCM),或者对我们更直观的,dots per pixel(DPPX)。
@media (resolution: 1.5dppx) { rules }@media (max-resolution: number) { rules }@media (min-resolution: number) { rules }
所以,在DPR=2的情况下,我们可以使用2倍分辨率的图片:
1 div { background-image: url('image.png'); }2 @media (resolution: 2dppx) {3 div { background-image: url('image-2x.png'); }4 }
兼容性
Chrome, Firefox, IE 10+支持 resolution Media Feature, 但IE不支持DPPX单位。为了兼容IE,可以使用DPI作为单位(标准屏幕DPI为96),例如:
@media (resolution: 1.5dppx), (resolution: 144dpi) { rules }
另外,Safari不支持 resolution ,使用 -webkit-device-pixel-ratio 代替:
@media (resolution: 1.5dppx), (resolution: 144dpi), (-webkit-device-pixel-ratio: 2) { rules }
Device Width and Height
这两个属性检测的是设备屏幕的宽度和高度,实用价值不高。这里的宽度和高度指的是设备的物理像素。
@media (device-width: number) { rules }@media (device-height: number) { rules }@media (max-device-width: number) { rules }@media (max-device-height: number) { rules }@media (min-device-width: number) { rules }@media (min-device-height: number) { rules }
Orientation
设备朝向:landscape或portrait。当宽>高时,设备为landscape模式;反之,则为portrait模式。这个功能对手持设备比较有用。
@media (orientation: landscape) { rules }@media (orientation: portrait) { rules }
Aspect Ratio
宽高比,例如16/9,16/10等。 aspect-ratio 表示浏览器的宽高比;而 device-aspect-ratio 表示设备的宽高比。
@media (aspect-ratio: horizontal/vertical) { rules }@media (device-aspect-ratio: horizontal/vertical) { rules }@media (min-aspect-ratio: horizontal/vertical) { rules }@media (min-device-aspect-ratio: horizontal/vertical) { rules }@media (max-aspect-ratio: horizontal/vertical) { rules }@media (max-device-aspect-ratio: horizontal/vertical) { rules }
@media (min-device-aspect-ratio: 16/9) {...}
注意,iPhone在landscape和portrait模式中,会反馈相同的宽高比;而另外一些设备,会在不同Orientation下返回不同的宽高比。
上一篇: Java 实例 - 获取向量元素的索引值
下一篇: php封装函数步骤
推荐阅读
-
CSS3重点总结_html/css_WEB-ITnose
-
Css3 filter图片处理_html/css_WEB-ITnose
-
CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose
-
纯css3制作写轮眼开眼及进化过程_html/css_WEB-ITnose
-
css3中 弹性盒模型布局之box-flex_html/css_WEB-ITnose
-
CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-ITnose
-
CSS3实现全景图特效_html/css_WEB-ITnose
-
结合CSS3的布局新特征谈谈常见布局方法_html/css_WEB-ITnose
-
「CSS3 」动画详解_html/css_WEB-ITnose
-
css3火焰文字样式代码_html/css_WEB-ITnose