响应式布局
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%;
}
作者:奥辰
微信号:chb1137796095
Github:https://github.com/ChenHuabin321
欢迎加V交流,共同学习,共同进步!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。