@media的使⽤规范
今天想了解下⽹站⾃适应是怎么实现的，接看到这篇⽂章⾃⼰觉得特别好，就保存下来。也供更多的朋友了解学习下。
优点:⽆需插件和⼿机主题，对移动设备友好，能够适应各种窗⼝⼤⼩。只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值
准备⼯作1：设置Meta标签
⾸先我们在使⽤Media的时候需要先设置下⾯这段代码，来兼容移动设备的展⽰效果：
这段代码的⼏个参数解释：
width = device-width：宽度等于当前设备的宽度
height = device-height：⾼度等于当前设备的⾼度
initial-scale：初始的缩放⽐例（默认设置为1.0）
minimum-scale：允许⽤户缩放到的最⼩⽐例（默认设置为1.0）
maximum-scale：允许⽤户缩放到的最⼤⽐例（默认设置为1.0）
ur-scalable：⽤户是否可以⼿动缩放（默认设置为no，因为我们不希望⽤户放⼤缩⼩页⾯）
准备⼯作2：加载兼容⽂件JS
因为IE8既不⽀持HTML5也不⽀持CSS3 Media，所以我们需要加载两个JS⽂件，来保证我们的代码实现兼容效果：
准备⼯作3：设置IE渲染⽅式默认为最⾼(这部分可以选择添加也可以不添加)
现在有很多⼈的IE浏览器都升级到IE9以上了，所以这个时候就有⼜很多诡异的事情发⽣了，例如现在是IE9的浏览器，但是浏览器的⽂档模式却是IE8:
为了防⽌这种情况，我们需要下⾯这段代码来让IE的⽂档模式永远都是最新的：
（如果想使⽤固定的IE版本，可写成：）
不过我最近⼜发现了⼀个更给⼒的写法：
怎么这段代码后⾯加了⼀个chrome=1，这个Google Chrome Frame（⾕歌内嵌浏览器框架GCF），
如果有的⽤户电脑⾥⾯装了这个chrome的插件，就可以让电脑⾥⾯的IE不管是哪个版本的都可以使⽤Webkit引擎及V8引擎进⾏排版及运算，⽆⽐给⼒，不过如果⽤户没装这个插件，那这段代码就会让IE以最⾼的⽂档模式展现效果。这段代码我还是建议你们⽤上，不过不⽤也是可以的。
进⼊CSS3 Media写法
我们先来看下下⾯这段代码，估计很多⼈在响应式的⽹站CSS很经常看到类似下⾯的这段代码：
@media screen and (max-width: 960px){
body{
background: #000;
}
}
这个应该算是⼀个media的⼀个标准写法，上⾯这段CSS代码意思是：当页⾯⼩于960px的时候执⾏它下⾯的CSS.这个应该没有太⼤疑问。
应该有⼈会发现上⾯这段代码⾥⾯有个screen，他的意思是在告知设备在打印页⾯时使⽤衬线字体，在屏幕上显⽰时⽤⽆衬线字体。但是⽬前我发现很多⽹站都会直接省略screen，因为你的⽹站可能不需要考虑⽤户去打印时，你可以直接这样写：
@media (max-width: 960px){
body{
background: #000;
}
}
CSS2 Media⽤法
其实并不是只有CSS3才⽀持Media的⽤法，早在CSS2开始就已经⽀持Media，具体⽤法，就是在HTML页⾯的head标签中插⼊如下的⼀段代码：
上⾯其实是CSS2实现的衬线⽤法，那CSS2的media难道就只能⽀持上⾯这⼀个功能吗？答案当然不是，他还有很多⽤法。
例如我们想知道现在的移动设备是不是纵向放置的显⽰屏，可以这样写：
我们把第⼀段的代码也⽤CSS2来实现，让它⼀样可以让页⾯宽度⼩于960的执⾏指定的样式⽂件：
既然CSS2可以实现CSS的这个效果为什么不⽤这个⽅法呢，很多⼈应该会问，但是上⾯这个⽅法，最⼤的弊端是他会增加页⾯http的请求次数，增加了页⾯负担，我们⽤CSS3把样式都写在⼀个⽂件⾥⾯才是最佳的⽅法。
回归CSS3 Media
上⾯我们⼤概讲了下CSS2的媒体查询⽤法，现在我们重新回到CSS3的媒体查询，在第⼀段代码上⾯我⽤的是⼩于960px的尺⼨的写法，那现在我们来实现等于960px尺⼨的代码：
@media screen and (max-device-width:960px){
body{
background:red;
}
}
然后就是当浏览器尺⼨⼤于960px时候的代码了：
@media screen and (min-width:960px){
body{
background:orange;
优美作文开头结尾}
}
我们还可以混合使⽤上⾯的⽤法：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
谷雨的诗}
上⾯的这段代码的意思是当页⾯宽度⼤于960px⼩于1200px的时候执⾏下⾯的CSS。
Media所有参数汇总
以上就是我们最常需要⽤到的媒体查询器的三个特性，⼤于，等于，⼩于的写法。媒体查询器的全部功能肯定不⽌这三个功能，下⾯是我总结的它的⼀些参数⽤法解释：
width：浏览器可视宽度。
height：浏览器可视⾼度。
device-width：设备屏幕的宽度。
device-height：设备屏幕的⾼度。
orientation：检测设备⽬前处于横向还是纵向状态。
aspect-ratio：检测浏览器可视宽度和⾼度的⽐例。(例如：aspect-ratio:16/9)
泥鳅挂面
device-aspect-ratio：检测设备的宽度和⾼度的⽐例。
color：检测颜⾊的位数。（例如：min-color:32就会检测设备是否拥有32位颜⾊）
color-index：检查设备颜⾊索引表中的颜⾊，他的值不能是负数。
monochrome：检测单⾊楨缓冲区域中的每个像素的位数。（这个太⾼级，估计咱很少会⽤的到）
resolution：检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是⽹格的还是位图设备。
注意下顺序，如果你把@media (min-width: 768px)写在了下⾯那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440，由于1440>768那么你的1200就会失效。
所以我们⽤min-width时，⼩的放上⾯⼤的在下⾯，同理如果是⽤max-width那么就是⼤的在上⾯，⼩的在下⾯
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
1280分辨率以上（⼤于1200px）
@media screen and (min-width:1200px){
#page{ width: 1100px; }#content,.div1{width: 730px;}#condary{width:310px}
}
1100分辨率（⼤于960px，⼩于1199px）
@media screen and (min-width: 960px) and (max-width: 1199px) {
#page{ width: 960px; }#content,.div1{width: 650px;}#condary{width:250px}lect{max-width:200px}
}
880分辨率（⼤于768px，⼩于959px）
@media screen and (min-width: 768px) and (max-width: 959px) {
#page{ width: 900px; }#content,.div1{width: 620px;}#condary{width:220px}lect{max-width:180px}
}
720分辨率（⼤于480px，⼩于767px）
@media only screen and (min-width: 480px) and (max-width: 767px){
#page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#condary{display:none}#access{width: 450px;
}#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}
440分辨率以下（⼩于479px）福州鱼丸汤
@media only screen and (max-width: 479px) {
#page{ width: 300px; }#content,.div1{width: 300px;}#condary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul
a{width:100px}
}
/* 竖屏 */
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
/
* 横屏 */红烧鲤鱼块
@media screen and (orientation: landscape) { 对应样式 }
上⾯的代码中⽤到了screen ，他的意思是在告知设备在打印页⾯时使⽤衬线字体，在屏幕上显⽰时⽤⽆衬线字体。但是⽬前我发现很多⽹站都会直接省略screen，因为你的⽹站可能不需要考虑⽤户去打印时。
PC端按屏幕宽度⼤⼩排序（主流的⽤橙⾊标明）
分辨率 ⽐例 | 设备尺⼨
1024500 （8.9⼨）
1024768 （⽐例4：3 | 10.4⼨、12.1⼨、14.1⼨、15⼨; ）1280800（16：10 |15.4⼨）
12801024(⽐例：5：4 | 14.1⼨、15.0⼨)美白全身
1280854(⽐例：15：10 | 15.2）
1366768 (⽐例：16：9 | 不常见）
1440900 （16：10 17⼨ 仅苹果⽤）
14401050（⽐例：5：4 | 14.1⼨、15.0⼨）
16001024（14：9 不常见）
16001200 （4：3 | 15、16.1）
16801050（16：10 | 15.4⼨、20.0⼨）
19201200 (23⼨）
通过上⾯的电脑屏蔽及尺⼨的例表上我们得到了⼏个宽度
大蒜面包
1024 1280 1366 1440 1680 1920
CSS代码
@media (min-width: 1024px){
body{font-size: 18px}
} />=1024的设备/
@media (min-width: 1100px) {
body{font-size: 20px}
良多趣味上一句} />=1024的设备/
@media (min-width: 1280px) {
body{font-size: 22px;}
}
@media (min-width: 1366px) {
body{font-size: 24px;}
}
@media (min-width: 1440px) {
body{font-size: 25px !important;}
}
@media (min-width: 1680px) {
body{font-size: 28px;}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
}
