点击刷新
1 什么是媒体查询¶
媒体查询指的是获取设备屏幕、浏览器尺寸（width,height），进而为不同尺寸设定不同的CSS样式。一般而言，可以通过@media来获取屏幕或浏览器尺寸信息。@media的常用参数如下表所示：
<html>
<head>
<title>媒体查询</title>
<style>
@media screen and (min-device-width:100px) and (max-device-width:300px){
body{
background-color: red;
}
}
@media screen and (min-device-width:301px) and (max-device-width:500px){
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>
根据浏览器尺寸修改页面背景色：当浏览器尺寸在300px到500px之间时，设置背景色为红色，当浏览器尺寸大于500时，设置背景色Wie红色。
<html>
<head>
<title>媒体查询</title>
<style>
@media screen and (min-width:300px) and (max-width:500px){
body{
background-color: red;
}
}
@media screen and (min-width:501px){
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>
除了控制背景色之外，还可以控制排版布局，例如：三个div，超大屏幕则使3个div显示在一行，中型尺寸两行显示，小屏幕三行显示。
<html>
<head>
<title>媒体查询</title>
<style>
#div0{
width: 100%;
height: 500px;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: green;
}
#div0 div:nth-child(3){
background-color: blue;
}
#div0 div{
float: left;
height:200px;
}
/* 1行3个div */
@media screen and (min-device-width:601px){
#div0 div{
width: 33.33%;
}
}
/* 1行2个div */
@media screen and (min-device-width:501px) and (max-device-width:601px){
#div0 div{
width: 50%;
}
}
/* 1行3个div */
@media screen and (max-device-width:500px){
#div0 div{
width: 100%;
}
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
另外多说一点，通常配合视口与媒体查询一起使用，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" >
其中，width=device-width定义了页面宽度为设备屏幕宽度；initial-scale=1.0设置初始显示宽度为原始比例，也就是1.0；user-scalable=0是禁用浏览器缩放。
2 引入媒体查询¶
2.1 方式一：在内部样式表中使用¶
方式一就是如上文中使用媒体查询一般，在一个内部样式表（style标签）中为不同的屏幕尺寸定义不同的样式，上文中已有多个示例演示，这里不再赘述。
2.2 方式二：在声明内部样式表时使用¶
方式二是在写style标签时，在声明标签时写明媒体查询，达到有条件地执行某个内部样式表的目的，使用方式如下：
<style media="(min-device-width:501px) and (max-device-width:601px)">
body{
background-color: blue;
}
</style>
我们使用这种方式来改写上一章节中根据屏幕尺寸不同行显示div的例子：
<html>
<head>
<title>媒体查询</title>
<style>
#div0{
width: 100%;
height: 500px;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: green;
}
#div0 div:nth-child(3){
background-color: blue;
}
#div0 div{
float: left;
height:200px;
}
</style>
<style media="(min-device-width:601px) and (max-device-width:800px)">
#div0 div{
width: 33.33%;
}
</style>
<style media="(min-device-width:501px) and (max-device-width:600px)">
#div0 div{
width: 50%;
}
</style>
<style media="(max-device-width:500px)">
#div0 div{
width: 100%;
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2.3 方式三：link标签引入外部样式文件¶
除了上述两种方式，也可以通过link标签写明media媒体查询条件，针对不同尺寸引入外部样式文件，引入方式如下：
<link href="css/index.css" rel="stylesheet" media="(min-device-width:100px) and (max-device-width:300px)">
继续改写上文3个div根据尺寸分行显示的例子，此次，我们需要新建多个CSS文件，文件名和内容如下：
public.css：无论哪种尺寸，都需要使用的样式
#div0{
width: 100%;
height: 500px;
}
#div0 div:nth-child(1){
background-color: red;
}
#div0 div:nth-child(2){
background-color: green;
}
#div0 div:nth-child(3){
background-color: blue;
}
#div0 div{
float: left;
height:200px;
}
1.css：屏幕尺寸大于701px时使用的样式
#div0 div{
width: 33.33%;
}
2.css：屏幕尺寸在501px到701px之间时使用的样式
#div0 div{
width: 50%;
}
3.css：屏幕尺寸小于500px时使用的样式
#div0 div{
width: 100%;
}
© 著作权归作者所有
举报
发表评论
0/200
