zoukankan      html  css  js  c++  java
  • 【转载】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和逗号(,)用来构建复杂的媒体查询

  • 相关阅读:
    一个周末掌握IT前沿技术之node.js篇<六>:Node.js与客户端模板引擎
    一个周末掌握IT前沿技术之node.js篇<四>:Node.js与Restful API
    一个周末掌握IT前沿技术之node.js篇<三>:Node.js与服务端模板引擎
    添加dom节点及优化
    CSS琐碎[1]
    兼容处理集合
    Dom优化
    apply函数应用
    javascript的slice()与splice()方法
    鼠标滚轮插件
  • 原文地址:https://www.cnblogs.com/buerjiongjiong/p/11544080.html
Copyright © 2011-2022 走看看