CSS3 media 入门

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

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

css3 media 语法：

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

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

width：

 通常指代视口宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。
比如iphone5的屏幕分辨率是1136×640，竖屏时device width是640，
横屏时是1136。通常，移动设备的浏览器都是全屏的，所以一般情况下width等于device-width。
但是height和device-height的情况不一样（浏览器上方的地址栏和下方的工具栏有可能不算进视口高度）
。鉴于一般媒体查询不采用height，所以本文所有例子全部使用width，指代width的像素

/*width大于或者等于min-width 600px*/ 
@media screen and (min- 600px) {
.....
}

    /*如果width小于或者等于500px，采用 的样式*/ 
    @media screen and (max- 500px) {
      .....
    }

    /*如果width在700px和900px之间*/
     @media only screen and (min- 700px) and (max- 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- 500px) {
        body {
            background-color: lightgreen;
        }
    }
    /*width大于或者等于min-width 600px*/ 
    @media screen and (min- 600px) {
        body {
            background-color:  yellow;
        }
    }
    /*如果width在700px和900px之间*/
     @media only screen and (min- 700px) and (max- 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