css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是)

写不同的css样式。而流式布局 则才算是响应式布局。

css3 media  语法：

  @media mediatype and|not|only (media feature) {
    CSS-Code;
}

在这之前一直对媒体查询有两个关键词min-width和max-width,模糊今天特意梳理下。

width：

width: 通常指代视口宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。

比如iphone5的屏幕分辨率是1136×，竖屏时device width是640，

横屏时是1136。通常，移动设备的浏览器都是全屏的，所以一般情况下width等于device-width。

但是height和device-height的情况不一样（浏览器上方的地址栏和下方的工具栏有可能不算进视口高度）

。鉴于一般媒体查询不采用height，所以本文所有例子全部使用width，指代width的像素 
/*width大于或者等于min-width 600px*/

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

.....

}
    /*如果width小于或者等于500px，采用 的样式*/

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

      .....

    }
    /*如果width在700px和900px之间*/

     @media only screen and (min-width: 700px) and (max-width: 900px) {

         .....

    }

demo:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style>

body {

    background-color:red;

}

    /*如果width小于或者等于500px，采用 的样式*/

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

        body {

            background-color: lightgreen;

        }

    }

    /*width大于或者等于min-width 600px*/

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

        body {

            background-color:  yellow;

        }

    }

    /*如果width在700px和900px之间*/

     @media only screen and (min-width: 700px) and (max-width: 900px) {

        body{

            background-color:  blue;

        }

    }

</style>

</head>

<body>

</body>

</html>

body默认红色 当html宽度小于500px 背景颜色 浅绿色 、当宽度大于600 黄色、当宽度在700-900直接 绿色

参考文档

https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

CSS3 media 入门的更多相关文章

  1. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  2. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  3. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  4. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

  5. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  6. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  7. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  8. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  9. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

随机推荐

  1. haproxy利用ACL规则封禁自定义ＩＰ地址拒绝访问

    现在有一个需求就是在发版的时候希望除公司IP外的外网访问服务的时候都是拒绝访问的 现在利用haproxy 的acl规则作出限制 errorfile       403 /etc/haproxy/err ...

  2. switch 方法 计算器

    <script type="text/javascript"> var d; var a = prompt("输入一个数字"); a = parse ...

  3. shell-for循环

    sheel语言for循环格式 for var in item1 item2 ... itemN do command1 command2 ... commandN done 案例1 #!/bin/ba ...

  4. 【USACO 3.2】Magic Squares

    题意 4*2个格子分别为 1234 8765 的魔板有3种操作,A:上下两排互换,B:最后一列放到第一列前面,C:中间四个顺时针旋转1格. 现在给出目标状态,找出最少步数可从原始状态到达目标状态,且输 ...

  5. destoon : 后台无法登录问题解决

    经常有朋友在destoon搬家的时候 , 数据还原之后 , 会出现后台无法登录的情况 . 具体表现为后台帐号密码输入后点击确定 , 页面刷新 .并没有跳转到相应后台页面 . 但是如果帐号密码输入错误 ...

  6. BZOJ3932: [CQOI2015]任务查询系统

    传送门 真不知道我没学主席树之前是有什么勇气说自己高级数据结构以及学的七七八八了. 这道题应该也是算是主席树的经典运用. 刚开始脑抽了,想把(S,E,P)的处理直接在线用树状数组xjb搞搞算了.写完后 ...

  7. linux下安装jdk

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 Java -version ,会有下面的信息: Javaversio ...

  8. spring-mvc注解(mvc:annotation-driver,JSON,配置详解)

    一.DefaultAnnotationHandlerMapping 和 AnnotationMethodHandlerAdapter 的使用已经过时! spring 3.1 开始我们应该用 Reque ...

  9. 仿window系统自带的日期差计算器类

    public class MonthSubstract { /// <summary> /// 日期差之月份 /// </summary> public int Months ...

  10. webapi8