Css 媒体查询 移动端适配

语法：
媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.

@media mediatype and|not|only  (media feature) {CSS-Code;}


媒体设备类型：

    all:用于所有设备--默认值
    print:用于打印机和打印预览
    screen:用于电脑屏幕，平板电脑，智能手机等(前端写这个就好了)
    speech:应用于屏幕阅读器等发声设备


媒体属性：
    max-height:定义输出设备中的页面最大可见区域高度。
    max-width:定义输出设备中的页面最大可见区域宽度。
    min-height:定义输出设备中的页面最小可见区域高度。
    min-width:定义输出设备中的页面最小可见区域宽度。
    width:定义输出设备中的页面可见区域宽度。
    height:定义输出设备中的页面可见区域高度。
    orientation:定义输出设备中的页面是横屏还是竖屏。
        landscape横屏 portrait竖屏
    max-device-height:定义输出设备的屏幕可见的最大高度。
    max-device-width:定义输出设备的屏幕最大可见宽度。
    min-device-width:定义输出设备的屏幕最小可见宽度。
    min-device-height:定义输出设备的屏幕的最小可见高度。
    device-height:定义输出设备的屏幕可见高度。
    device-width:定义输出设备的屏幕可见宽度。


操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

（1）and 关键字用来把多个媒体属性和媒体类型组合成一条媒体查询，只有当每个属性都为真时，结果才为真。   
    @media  all and (min-width: 700px) and (orientation: landscape) { ... }
在可视区域宽度不小于700像素并在在横屏时有效

（2）逗号： 媒体查询中使用逗号分隔，效果等同于 or 逻辑操作符，使用逗号分隔的媒体查询，任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。
    @media all and (min-width: 700px),handheld and (orientation: landscape) { ... }

（3）not 关键字用来对一条媒体查询的结果进行取反，在媒体查询为假时返回真,在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询
    例如：
    @media not screen and (color), print and (color)
    等价于：
    @media (not (screen and (color))), print and (color)

（4）only关键字用来排除不支持css3媒体查询的浏览器。
     对于支持Media Queries的设备来说，存在only关键字，移动设备的 Web 浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件
     所以，在使用媒体查询时，only最好不要忽略

css2，css3的版本媒体查询的区别：
    一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)
     在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在media属性用于为不同的媒介类型规定不同的样式，媒体属性是CSS3新增的内容；
    <link rel="stylesheet" href="css/wide.css" media="screen " />
     <link rel="stylesheet" href="css/mobile.css" media="screen and (min-width:320px) and (max-width:640px)" />

/* 手机等小屏幕手持设备 */
		@media screen and (min-width: 320px) and (max-width: 480px) {}
/* 平板之类的宽度 1024 以下设备 */
		@media only screen and (min-width: 321px) and (max-width: 1024px) {}
/* PC客户端或大屏幕设备: 1028px 至更大 */
		@media only screen and (min-width: 1029px) {}
/* 竖屏 */
		@media screen and (orientation:portrait) {对应样式}
/* 横屏 */
		@media screen and (orientation:landscape){对应样式}

1、屏幕尺寸：指的是屏幕对角线的长度(1英寸 = 2.54 厘米)

2、分辨率：是指宽度上和高度上最多能显示的物理像素点个数

3、点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度；
   手机屏幕距离你的眼睛10-12英寸(约25-30厘米)时,它的分辨率只要达到300PPI这个神奇数字(每英寸300个像素点)以上,你的视网膜就无法分辨出像素点了,这样的屏幕被称为“视网膜屏幕”-Retina

5、DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思

6、设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。

7、设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定大小的，然后由相关系统转换为物理像素。

8、DPR(设备像素比)：设备像素比 = 设备像素 / 逻辑像素。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)
     window.devicePixelRatio