CSS media queries

近期在做1些网页页面复印时的独特解决触碰到了media queries，想系统软件学习培训1下，在MOZILLA DEVELOPER NETWORK看到1篇文章内容讲的很非常好，融合自身的应用总结1下。

CSS2/media

在CSS2中可使用media特性可使特殊style只在特定新闻媒体种类下其功效,例如网页页面一些一部分必须在复印的情况下掩藏或增大，这时候候可使用media使一些style只在复印的情况下起效

常见的新闻媒体种类有

1.all（全部），可用于全部机器设备。
2.handheld（手持），用于手持机器设备。
3.print（包装印刷），用于分页查询原材料和复印预览方式下在显示屏上的文本文档主视图。
4.projection（投射），用于投射演试稿子，比如投射仪。
5.screen（显示屏） ，关键用于测算机显示屏。
在应用的情况下能够在款式表立即撰写 @media命令+空格+新闻媒体种类（好几个都好分隔）

CSS3/meidia queries

在CSS3中对其开展了提高，加上了更多的新闻媒体查寻，CSS3中的Media Queries提升了更多的新闻媒体查寻，另外能够加上不一样的新闻媒体种类的表述式用来查验新闻媒体是不是合乎一些标准，例如假如网页页面用PC浏览和Pad浏览应用不一样的style，在CSS2中只能把新闻媒体种类设为screen是不可以保证的，而在CSS3中能够对screen种类新闻媒体设定表述式进1步分辨显示屏尺寸来完成这1作用。能够写出这样的编码

当新闻媒体种类配对且表述式为真的情况下，对应style就会其功效，除非应用not或only实际操作符，不然新闻媒体种类并不是必须的，默认设置意味着全部新闻媒体种类。

实际操作符
and

and实际操作符用于将好几个media feature组成成1个查寻，另外用于组成media type 和media feature，1个基础的media query相近这样，1个meidia feature功效于全部media type

@media (min-width: 700px) { ... }

可是假如只想在横向显示信息时运用便可以应用and实际操作符把media type和media feature融合起来

@media (min-width: 700px) and (orientation: landscape) { ... }
这样上面的media query仅有在可视性对话框（viewport）最少是700px而且是横向显示信息的情况下才回到true，假如还想进1步限定机器设备为tv能够这样

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

逗号隔开的目录

在应用逗号隔开的查寻目录中每一个查寻都被视作1个单独的查寻，任何本查寻中的功效符不危害别的查寻，要是有1个查寻回到true，style就会被功效。

举例来讲，假如期待特殊style在viewport最少宽度为700px或手持式机器设备上起效，能够这么写：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }not

not实际操作符功效域全部查寻，因此仅有在全部查寻回到false的状况下应用not后才会回到true。当应用逗号隔开的目录的情况下not功效于相邻的查寻，而不容易功效于每一个查寻

@media not all and (monochrome) { ... }

查寻实际上会这样起功效

@media not (all and (monochrome)) { ... }

而并不是这样

@media (not all) and (monochrome) { ... }

针对逗号隔开的目录

@media not screen and (color), print and (color)

查寻是这模样的

@media (not (screen and (color))), print and (color)only

only实际操作符用于阻拦不适用带有media feature的media queries的访问器运用特殊style

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

media features

说了许多次media feature了，究竟有是多少个media feature呢

•width：访问器宽度
•height：访问器高宽比
•device-width：机器设备显示屏辨别率的宽度值
•device-height：机器设备显示屏辨别率的高宽比值
•orientation：访问器对话框的方位纵向還是横向，当对话框的高宽比值超过等于宽度时该特点值为portrait，不然为landscape。
•aspect-ratio：占比值，访问器的横纵比.
•device-aspect-ratio：占比值，显示屏的横纵比.
•color：机器设备应用是多少位的色调值，假如并不是五颜六色机器设备，值为0
•color-index：颜色表的颜色数
•monochrome：纯色帧缓存器每一个像素的字节
•resolution：辨别率值，机器设备辨别率值
•scan：电视机机种类机器设备扫描仪方法，progressive或interlace
•grid：只能特定两个值0或1
怎样引进media
 

有两种常见的引进方法

1、link方式引进

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

2、@media引进

访问器适配性





运用
For iPhone 4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">挪动机器设备iPad上的Safari和在iPhone上的是同样的，只是她们不一样的地方是iPad申明了不一样的方位，例如说上面的事例，在纵向(portrait)时选用portrait.css来，在横向（landscape）时选用landscape.css。

For Android

参照

http://www.w3cplus.com/content/css3-media-queries

http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries