【转载】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-960px){
  body{
    background:#000;        
  }  
}

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

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

原文地址:https://www.cnblogs.com/buerjiongjiong/p/11544080.html