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>
除了上述两种方式，也可以通过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%;
}
Original: https://www.cnblogs.com/chenhuabin/p/14709885.html
Author: 奥辰
Title: 响应式布局
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/710888/
转载文章受原作者版权保护。转载请注明原作者出处！