语法：@media screen and (min-width: 320px) and (max-width : 479px)

media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。

一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外，就是高像素比的终端，比如 iphone4以上的retina屏，一个iphone5的小小的屏幕（iphone的屏幕是真小啊），他的分辨率竟然达到了1136*640，几乎等于 一个笔记本的分辨率。你在这样小的物理显示界面打开一个网页，他用1136的分辨率来显示，结果就是所有元素小的可怜。

在面对这种分辨率精细的终端，我们有另外一个条件查询语句 device-pixel-ratio。

比如例子里的

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判断终端的像素比是2的话，所渲染的样式。iphone4以上像素比是2，高分辨率Andriod设备像素比是1.5，例子里只有像素比为2的查询，1.5的或者其他比例方法一样，前面用的是几种浏览器的私有属性，最后一种是通用属性。

演示代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

        <title>响应式布局</title>

        <style type="text/css">

            div {

                background: #ccc;

                width: 100%;

                height: 400px;

                border: 2px solid #4183C4;

            }

            span {

                display: block;

                float: left;

                background: #007902;

                color: #fff;

                line-height: 25px;

                padding: 10px;

                -moz-box-sizing: border-box;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

                border: 2px solid #fff;

            }

            @media screen and (max-width: 400px) {

                span {

                    width: 100%;

                }

            }

            @media screen and (min-width: 400px) and (max-width: 800px) {

                span {

                    width: 50%;

                }

            }

            @media screen and (min-width: 800px) {

                span {

                    width: 25%;

                }

            }

        </style>

        <script type="text/javascript">

            window.onload = function() {

                var divCon = document.createElement('div');

                var span;

                for (var i = 0; i < 5; i++) {

                    span = document.createElement('span');

                    span.innerHTML = "内容块-" + i;

                    divCon.appendChild(span);

                }

                document.body.appendChild(divCon);

                //alert(divCon.offsetWidth);

            }

        </script>

    </head>

    <body>

        <h3>如果大于屏幕宽度小于400px就一列显示,400px-800px两列显示，800像素以上四列显示</h3>

    </body>

</html>

相关阅读：移动设备像素比

CSS3学习笔记--media query 响应式布局的更多相关文章

  1. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

  2. css3 @media 实现响应式布局

    使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...

  3. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  4. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  5. 六、使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...

  6. 使用 media 实现响应式布局

    最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo.其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要 ...

  7. CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式   Med ...

  8. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  9. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

随机推荐

  1. ACM课程总结

    当我还是一个被P哥哥忽悠来的无知少年时,以为编程只有C语言那么点东西,半个学期学完C语言的我以为天下无敌了,谁知自从有了杭电练习题之后,才发现自己简直就是渣渣--咳咳进入正题: STL篇: 成长为一名 ...

  2. 不怕你配置不对，就怕你看的资料不对！MIM 与 SharePoint 同步完全配置指南。

    为了更好的同步 User Profile,在 SharePoint 2010 中首次引入了 FIM (ForeFront Identity Manager) 用于编辑 User Profile 的同期 ...

  3. linux的特殊符号与正则表达式

    第1章 linux的特殊符号 1.1 通配符 * {} 1.1.1 含义 方便查找文件 通配符是用来找文件名字的. 1.1.2  * 通过find 命令找以 .sh 结尾的文件,使用*替代文件名字. ...

  4. SAXReader简单实例解析HTML

    转载自:http://blog.csdn.net/seayqrain/article/details/5024068# 使用SAXReader需要导入dom4j-full.jar包. dom4j是一个 ...

  5. js里面的map、filter、forEach、reduce、for in、for of等遍历方法

    1.map 遍历数组,改变原数组 [2, 3, 4, 5].map(function(val, key,arr) { return val > 3; }) var data = [ { name ...

  6. Nginx Location 匹配

    location匹配命令 ~      #波浪线表示执行一个正则匹配,区分大小写~*    #表示执行一个正则匹配,不区分大小写^~    #^~表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配 ...

  7. 解决Android下元素滑动问题

    移动端左右.上下滑动: 当页面中既需要页面滑动操作,又需要上下或左右滑动页面上的某个元素时,直接使用zepto中提供的swipe事件是不能直接达到目的的,原因如下: (1)在Android低端机上to ...

  8. BPF漫谈

    源起 最近看到国内两篇文章[1][2]先后翻译了就职于Netflix的性能分析大牛Brendan Gregg于2017年7月31日写的<Golang bcc/BPF Function Traci ...

  9. Js的闭包，这篇写的是比较清晰明了的

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  10. 06.十分钟学会表达式语言EL

    一. 概念:MVC设计模式一个主要好处就是让jsp中的代码越来越来少,而且规定只能出现三种代码:接收属性,判断语句,迭代输出.但是,在开发中,jsp输出至少还是需要接受VO对象的,这时候为了避免导入V ...