语法：@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. hbase建表

    import java.util.ArrayList; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hb ...

  2. Spring AOP分析(2) -- JdkDynamicAopProxy实现AOP

    上文介绍了代理类是由默认AOP代理工厂DefaultAopProxyFactory中createAopProxy方法产生的.如果代理对象是接口类型,则生成JdkDynamicAopProxy代理:否则 ...

  3. w3wp.exe已附加有调试器，但没有该调试器配置为调试此未经处理的异常，若要调试此异常，必须分离当前的调试器。

    之前通过使用VS2010附加进程调试项目后,今天开机发现调试本机的项目报错如下图: 到网上到处查看无果,经过反复实验找到解决方法,我的项目是发布到IIS的 1.首先删除IIS上面的项目 2.在VS右击 ...

  4. Java GC算法 垃圾收集器

    GC算法 垃圾收集器 概述 垃圾收集 Garbage Collection 通常被称为"GC",它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. ...

  5. 阿里云全民云计算活动：云服务器ECS二折起(云主机)采购指南

    首先要注册并登录阿里云,完成实名认证 可以用手机号新注册账号, 也可以使用淘宝账号直接登录,其他的登录方式还支持微博账号和支付宝账号等. 登录后如下图,先点"控制台", 然后鼠标移 ...

  6. 【转】用PowerDesigner制作数据库升级脚本

    [原创]用PowerDesigner制作数据库升级脚本   很多人使用PD的时候就问有没有制作自动升级脚本的功能.其实是有的. 操作原理: 1.保存原来的版本,另存为apm的文件,生成一个Archiv ...

  7. [转]SQL Server为啥使用了这么多内存？

    原文地址:http://support.microsoft.com/gp/anxin_techtip6/zh-cn SQL Server为啥使用了这么多内存? SQL Server的用户,常常会发现S ...

  8. let和const命令

    let命令 1.let用来声明变量,类似于var,但只在代码块内有效. { let a = 1; var b = 2; } console.log(a); //a is not defined con ...

  9. MeshRenderer组件及相关API

    MeshRenderer:网格过滤器,用于"渲染"显示模型. Cast Shodows:是否投射阴影.(on:开.off:关) Receive Shodows:是否接收阴影. Ma ...

  10. excel vlookup

    今天在百度知道的时候,看到旁边有人问excel中条件查找vlookup的问题,有几位高手都知道使用vlookup作答,可惜都是没有经过测试,直接复制别人的答案,让所有的读者都无法实施,一头雾水.今天我 ...