一、前言
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height和color（等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。
二、媒体查询语法
CSS3 中的媒体查询：根据浏览器窗口大小的改变，页面颜色就会改变。
CSS3 语法
@media mediatype and|not|only (media feature) { CSS-Code;}
复制代码
CSS2 语法
CSS2中media:通过<link>标签的media属性为样式表指定设备类型：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
复制代码
三、应用示例
在CSS中，@media规则可置于代码的顶层或位于其它任何 @条件规则组内。
媒体查询包含一个可选的媒体类型和媒体特性表达式(0 或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询结果为true。
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>无标题文档</title> </head><style> @media (max-width:5000px) { body{ margin:0 auto; width:1000Px; } .left{ float:left; width:450px; height:1200px; margin-left:25px; margin-right:25px; background-color:#99FFCC; } .right{ float:right; width:450px; height:1200px; margin-left:25px; margin-right:25px; background-color:#FFFF99; } .rtop{ width:450px; height:150px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:250px; font-size:14px; line-height:21px; text-align:center; overflow:hidden; } .rcenter{ width:450px; height:150px; background-color:#CCFFFF; position:absolute;ss left:auto; top:650px; text-align:center; overflow:hidden; } .rbottom{ width:450px; height:150px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:1050px; font-size:20px; line-height:30px; text-align:center; overflow:hidden; } } @media screen and(min-width:750px) and (max-width:1000px) { body{ margin:0 auto; width:750Px; } .left{ float:left; width:350px; height:900px; margin-right:25px; background-color:#99FFCC; } .right{ float:right; width:350px; height:900px; margin-left:25px; background-color:#FFFF99; } .rtop{ width:350px; height:100px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:200px; font-size:14px; line-height:21px; text-align:center; overflow:hidden; } .rcenter{ width:350px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:500px; text-align:center; overflow:hidden; } .rbottom{ width:350px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:800px; font-size:20px; line-height:30px; text-align:center; overflow:hidden; } } @media screen and (min-width: 320px) and (max-width: 750px) { body{ margin:0 auto; width:320Px; } .left{ margin:0 auto; width:320px; height:300px; background-color:#99FFCC; } .right{ margin:0 auto; width:320px; height:900px; background-color:#FFFF99; } .rtop{ width:320px; height:100px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:500px; font-size:14px; line-height:21px; text-align:center; overflow:hidden; } .rcenter{ width:320px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:800px; text-align:center; overflow:hidden; } .rbottom{ width:320px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:1100px; font-size:20px; line-height:30px; text-align:center; overflow:hidden; } }</style><body> <div class="left"></div> <div class="right"> <div class="rtop"> <p>这是第一段文字这是第一段文字这是第一段文字 这是第一段文字这是第一段文字这是第一段文字 这是第一段文字这是第一段文字这是第一段文字 这是第一段文字这是第一段文字这是第一段文字</p> </div> <div class="rcenter"> <p>这是第二段文字这是第二段文字这是第二段文字 这是第二段文字这是第二段文字这是第二段文字 这是第二段文字这是第二段文字这是第二段文字 这是第二段文字这是第二段文字这是第二段文字</p> </div> <div class="rbottom"> <p>这是第三段文字这是第三段文字这是第三段文字 这是第三段文字这是第三段文字这是第三段文字 这是第三段文字这是第三段文字这是第三段文字 这是第三段文字这是第三段文字这是第三段文字</p> </div> </div></body></html>
复制代码
四、浏览器兼容性
五、拓展阅读
HSL 是CSS3引进的一种将 RGB 色彩模型中的点在坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。
5.1 定义与用法
hsl() 函数使用色相、饱和度、亮度来定义颜色。
HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值 0-100% 。
亮度（L），取值 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
5.2 CSS 语法
hsl(hue, saturation, lightness)
复制代码
5.3 实例
定义 HSL 颜色：
#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */#p2 {background-color:hsl(120,100%,75%);} /* 浅绿 */#p3 {background-color:hsl(120,100%,25%);} /* 暗绿 */#p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */
复制代码
5.4 浏览器支持
表格中的数字表示支持该函数的第一个浏览器版本号。
5.5 hsla()
css中存在两种设置颜色值的方式：hsl()和hsla()，它们基本上都是采用了HSL色彩模式的方法来设置颜色，接下来就来看看什么是 HSLA 色彩模式。
HSLA是在HSL的基础上增加了一个透明度(A)的设置,取值 0~1 之间。
评论