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