【转载】CSS Media媒体查询使用大全，完整媒体查询总结

 

【原文 https://www.cnblogs.com/lguow/p/9316598.html】

 

 

学习总结：

1.设置IE的渲染方式为最高：

　　IE浏览器升级到IE9以上，但是有时候浏览器的文档模式却是IE8， 为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新

　　

<meta http-equiiv="X-UA-Compatible" content="IE=edge">

 

还有一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">

这段代码后面加了一个chrome=1, 这是由于GOOGLe Chrome Frame(谷歌内置浏览器框架GCF), 如果用户电脑焊装这个chrome插件，就可以让电脑内的IE浏览器贵宾版本因素，使用webkit引擎进行排版及运算。当然如果用户没有安装这个插件，这段代码就会让IE浏览器以最高的文档模式展现效果。

 

2.总体开发思路：

使用css3中媒体查询的大致思路就是判断网页在不同设备中所处的宽度范围，这样的范围可能有三种（PC、平板、手机），也可能是四中（PC、平板、中大屏手机、小屏手机），当然也可能只需要两种（平板、手机，pC端单独开发一版时可不作为CSS3媒体查询的适用对象），并为各种宽度范围情况下的所需页面元素套用不同的CSS样式，从而适配各种设备。

 

3.响应式网页开发中的宽度问题：

　　在实际开发中，通常需要设置响应式网页宽度的最大值，一旦忽略最大宽度，臃肿或者零散的网页布局都会造成视觉洪灾，也即是我们常说的看起来很low。

　　另外，目前最为常见的宽度基本上都是：

1. 大于等于960px的PC端（1960px、1600px、1440px,1280px、1140px、960px）
2. 960px至640px之间的平板端（768px、640px）
3. 640px以下的手机端（480px,320px）

　　以上宽度存在已久，且显示设备中的网页宽度会长期除以这样的状态下，在响应式网页宽度设计上，基本上从这几个尺寸考虑就已经足够。

 

4.CSS3 meidia媒体查询的写法

　　

@media screen and（max-width:960px）{
  body{
    background:#000;        
  }  
}

　　这是一个media的标准写法，在CSS文件中，意为： 当页面小于960px时执行以下css代码。

 

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