当(浏览器)窗口宽度小于400px时,三个列每列占满全部宽度,边框是蓝色;
当(浏览器)窗口宽度在400px到1000px之间时,排三列,中间列宽度自适应,边框是红色;
当(浏览器)窗口宽度大于1000px时,三个列并列显示,每个宽度固定,边框是绿色
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>媒体查询小例</title>
<!--<link href="stylesheet1.css" rel="stylesheet" media="all and (min-width: 1000px)" />
<link href="stylesheet2.css" rel="stylesheet" media="all and (min-width: 400px) and (max-width: 1000px)" />
-->
<style>
@media all and (max-width :400px){
#parent>div{
border:1px solid blue;
padding:20px;
}
}
@media all and (min-width: 1000px){
#parent>div{
border:1px solid green;
padding:20px;
}
#parent{
display: box;
display: -moz-box;
display: -webkit-box;
}
#left{
width: 200px;
}
#center {
width: 400px;
}
#right{
width: 400px;
}
}
@media all and (min-width: 400px) and (max-width: 1000px){
#parent>div{
border:1px solid red;
padding:20px;
}
#parent{
display: box;
display: -moz-box;
display: -webkit-box;
}
#left{
width: 300px;
}
#center {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#right{
width: 300px;
}
}
</style>
</head>
<body>
<h1>媒体查询小例</h1>
<div id="parent">
<div id="left">
我是第一个div 始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。
</div>
<div id="center">
我是第二个div 始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。
</div>
<div id="right">
我是第三个div 始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。 我是第三个div 始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上,是由社会主义初级阶段的主要矛盾决定的。主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。
</div>
</div>
</body>
</html>
小于400px时:
在400px到1000px之间时:
大于1000px时: