媒体查询-------基于屏幕宽度和像素率的响应设计

写这个东东，主要是因为某公司笔试的时候忘了像素率的那个属性名字忘掉怎么写了。。。。。

由于移动媒体的飞速发展，早早就出现了移动优先的设计原则。如果你还在想为手机用户建一个站，为PC客户建一个站，为PAD用户建一个站，那么一定是费时费力的而且维护起来也十分不便。所以一个网站适应所有的情形的“ONE WEB”想法也深得程序员的拥护。现在所说的媒体查询就有点类似我们之前指定PRINT样式那样,只不过是在前者有所加强。

方法有两种：

一，使用LINK 元素的media属性。例如：<link rel="stylesheet" href="print.css" media="print"/>

二、在样式表中写入@media规则。例如：

　　　　@media print{

　　　　　　　　　　　　　　xxx;

　　　　}

media的属性默认值是all，除此还可以接受：aural，braille，handheld，print，projection，screen,tty,tv。

媒体查询增强了媒体的类型方法，允许根据设备的特性来指定样式表。接受的媒体特性有height，width，device-height(设备高度），device-width，orientation（方向），aspect-ratio（高度比），device-aspect-ratio，color，color-index（颜色数），monochrome（单色），resolution（分辨率），scan（扫描）,grid（栅格）

还有一些非标准的媒体特性：device-pixel-ratio（非标准是要浏览器前缀的-webkit-moz）我咋忘了怎么写ratio了呢 T T。。。

写法如下<link rel="stylesheet" media="logic type and (feature:value)" href="xx.css" />

@media logic type and(feature:value){

　　　　xxxxxxxxxxx;

}

logic就是逻辑only not 那些

type就是screen ，print 那些

feature：就是height，width那些；

下面基于高像素率设备指定样式

@media only screen and（-webkit-min-device-pixel-ratio:1.5）,only sreen and（-moz-min-device-pixel-ratio:3/2),only sreen and（-o-min-device-pixel-ratio:3/2),only screen and(min-device-pixel-ratio:1.5)

{xxxxxxxxxxxxxxxxx;}