网站开发进阶（六十八）CSS3媒体查询@media
Posted No Silver Bullet
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站开发进阶（六十八）CSS3媒体查询@media相关的知识，希望对你有一定的参考价值。
一、前言
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：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>
四、浏览器兼容性
以上是关于网站开发进阶（六十八）CSS3媒体查询@media的主要内容，如果未能解决你的问题，请参考以下文章