一、什么是媒體查詢
media query，媒體查詢，要想在不同的尺寸屏幕設定不同的樣式，尤其是移動端，使用媒體查詢可以解決這個問題。
@media是CSS3的屬性，媒體查詢也是實現自定義布局的重要方式之一。
二、媒體查詢參數
width和height：是指瀏覽器的寬度和高度
device-width和divice-height：是指移動端的寬度和高度。
例如： 當屏幕寬度為300px到500px之間的時候，wrap下的div寬度為父元素的20%。
注意： 寬度條件一定要加小括號，同時and之間要有空格。格式一定要正確。
<head> <style> #wrap { width: 100%; height: 500px; border: 1px solid red; } #wrap div { float: left; height: 100px; } @media screen and (min-width: 300px) and (max-width: 500px){ #wrap div{ width: 20%; } } </style> </head> <body> <div id="wrap"> <div></div> <div></div> <div></div> </div> </body>
三、其他媒體查詢的引入方式
媒體引入方式有三種。第一種：@media（上面那種），第二種：style標簽引入方式（現在這種），第三種：link標簽（下面那種）。
這里講第二種方法：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>媒體查詢</title> <style> div{ border: 1px solid red; } #wrap{ width: 100%; height: 500px; } #wrap div{ float: left; height: 100px; } </style> <style media="(min-device-width: 300px) and (max-device-width: 399px)"> #wrap div{ width: 50%; } #wrap div:nth-child(1){ background: red; } #wrap div:nth-child(2){ background: yellow; } #wrap div:nth-child(3){ background: blue; } </style> </head> <body> <div id="wrap"> <div></div> <div></div> <div></div> </div> </body>
代碼解析： 當屏幕寬度為300px到399px之間的時候，每個div的寬度占父元素的50%，並且每個div依次為紅黃藍。（注意：nth-child是從1開始的。）
效果如下圖所示。
四、采用link標簽的方式引入媒體查詢
在link標簽上添加media關鍵字，就可以根據不同的屏幕尺寸，引入不同的樣式表。例如默認樣式表為css1，當屏幕大於300px小於399px的時候，就引入樣式表css2。
<link href="./css1.css"></link> <link href="./css2.css" media="(min-device-width: 300px) and (max-device-width: 399px)"></link>