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