语法：@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. centos 6.9安装zabbix 3.0

    Linux下常用的系统监控软件有Nagios.Cacti.Zabbix.Monit等,这些开源的软件,可以帮助我们更好的管理机器,在第一时间内发现,并警告系统维护人员. 今天开始研究下Zabbix,使 ...

  2. ⑩bootstrap组件 导航 使用基础案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. mapbox-gl 开发包dev生成

    mapbox-gl简介 mapbox-gl采用webgl,提供在线地图实时渲染功能,具有以下特点: 1.多图层显示 2.图层元素显示样式在颜色.字体.大小范围等.是否显示等可实时更改 3.定位抓取选择 ...

  4. table固定头部，表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...

  5. 文本域、bootstrap-table显示以及MySQL三者间的换行符问题

    首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行. 也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能 ...

  6. C#实现中国身份证验证问题

    C#中国身份证验证,包括省份验证和校验码验证,符合GB11643-1999标准...   今天写的 C#中国身份证验证,包括省份验证和校验码验证,符合GB11643-1999标准... 理论部分: 1 ...

  7. C#中迭代器的概念和两种实现方式

    1.首先我们看下IEnumerable接口定义:   namespace System.Collections    {        // Summary:        //     Expose ...

  8. linux操作系统基础篇（二）

    Linux用户.群组.权限 1.用户也是由一个个文件组成的下列文件都是存放用户信息的文件 useradd user1 /etc/passwd: 存放用户信息  /etc/shadow/ :存放用户密码 ...

  9. Python 标准库 urllib2 的使用细节（转）

    http://www.cnblogs.com/yuxc/archive/2011/08/01/2123995.html http://blog.csdn.net/wklken/article/deta ...

  10. Web攻击技术

    Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...