语法：@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. 通过xinetd服务管理 rsync 实现开机自启动

    1.1 xinetd服务配置 1.1.1 检查xinetd服务是否安装 [root@backup ~]# rpm -qa xinetd [root@backup ~]# rpm -ql xinetd ...

  2. redis数据库安装及简单的增删改查

    redis下载地址:https://github.com/MSOpenTech/redis/releases. 解压之后,运行 redis-server.exe redis.windows.conf  ...

  3. Oracle-3 - ：超级适合初学者的入门级笔记--用户权限，set运算符，高级子查询

    上一篇的内容在这里第二篇内容, 用户权限:创建用户,创建角色,使用grant  和 revoke 语句赋予和回收权限,创建数据库联接 创建用户:create user xxx identified b ...

  4. no suitable driver found for jdbc:mysql//localhost:3306/..

      出现这样的情况,一般有四种原因(网上查的): 一:连接URL格式出现了问题(Connection conn=DriverManager.getConnection("jdbc:mysql ...

  5. Vue组件库 VV-UI 开始接受PR啦，有兴趣小伙伴可以一起参与开源哦。

    前言: 刚开源出来的VV-UI目前刚刚起步,组件不是很多,非常欢迎大家的pr和Star.项目地址: https://github.com/VV-UI/VV-UI演示地址: https://vv-ui. ...

  6. [转载] 一致性hash算法释义

    转载自http://www.cnblogs.com/haippy/archive/2011/12/10/2282943.html 一致性Hash算法背景 一致性哈希算法在1997年由麻省理工学院的Ka ...

  7. 《Linux命令行与shell脚本编程大全》第十章 使用编辑器

    主要介绍vim, nano, emacs,KWrite,Kate,GNOME 10.1 vim Unix系统最初的编辑器 10.1.1检查vim软件包 先搞明白你所用的Linux系统是哪种vim软件包 ...

  8. Python爬虫知识点四--scrapy框架

    一.scrapy结构数据 解释: 1.名词解析: o 引擎(Scrapy Engine)o 调度器(Scheduler)o 下载器(Downloader)o 蜘蛛(Spiders)o 项目管 ...

  9. 查看Page结构

    SQL Server存储数据的基本单元是Page,每一个Page的大小是8KB,数据文件是由Page构成的.在同一个数据库上,每一个Page都有一个唯一的资源标识,标识符由三部分组成:db_id,fi ...

  10. C# Code First 实例学习

    Code First是Entity Framework提供的一种新的编程模型.通过Code First我们可以在还没有建立数据库的情况下就开始编码,然后通过代码来生成数据库.下面具体讲解一下,在操作的 ...