媒体查询
@media mediatype and|not|only (media feature) { CSS-Code; } mediatype：
媒体类型，all：所有类型 screen：电脑，手机，平板 print：打印机
示例：
@media screen and (max-width: 300px) {
body { background-color:lightblue;
}
}
为屏幕类型为电脑，手机，平板，且宽度在0到300之间的设备设置背景色 你也可以针对不同的媒体使用不同 stylesheets :
示例：
使用 @media 查询来制作响应式设计
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: "Lucida Sans", Verdana, sans-serif; } .main img { width: 100%; } h1 { font-size: 1.625em; } h2 { font-size: 1.375em; } .header { padding: 1.0121457489878542510121457489879%; background-color: #f1f1f1; border: 1px solid #e9e9e9; } .menuitem { margin: 4.310344827586206896551724137931%; margin-left: 0; margin-top: 0; padding: 4.310344827586206896551724137931%; border-bottom: 1px solid #e9e9e9; cursor: pointer; } .main { padding: 2.0661157024793388429752066115702%; } .right { padding: 4.310344827586206896551724137931%; background-color: #CDF0F6; } .footer { padding: 1.0121457489878542510121457489879%; text-align: center; background-color: #f1f1f1; border: 1px solid #e9e9e9; font-size: 0.625em; } .gridcontainer { width: 100%; } .gridwrapper { overflow: hidden; } .gridbox { margin-bottom: 2.0242914979757085020242914979757%; margin-right: 2.0242914979757085020242914979757%; float: left; } .gridheader { width: 100%; } .gridmenu { width: 23.481781376518218623481781376518%; } .gridmain { width: 48.987854251012145748987854251012%; } .gridright { width: 23.481781376518218623481781376518%; margin-right: 0; } .gridfooter { width: 100%; margin-bottom: 0; } @media only screen and (max-width: 500px) { .gridmenu { width: 100%; } .menuitem { margin: 1.0121457489878542510121457489879%; padding: 1.0121457489878542510121457489879%; } .gridmain { width: 100%; } .main { padding: 1.0121457489878542510121457489879%; } .gridright { width: 100%; } .right { padding: 1.0121457489878542510121457489879%; } .gridbox { margin-right: 0; float: left; } } </style> </head> <body> <div class="gridcontainer"> <div class="gridwrapper"> <div class="gridbox gridheader"> <div class="header"> <h1>The Pulpit Rock</h1> </div> </div> <div class="gridbox gridmenu"> <div class="menuitem">The Drive</div> <div class="menuitem">The Walk</div> <div class="menuitem">The Return</div> <div class="menuitem">The End</div> </div> <div class="gridbox gridmain"> <div class="main"> <h1>The Walk</h1> <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="./1558493802.png" alt="Pulpit rock" width="" height=""> </div> </div> <div class="gridbox gridright"> <div class="right"> <h2>What?</h2> <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p> <h2>Where?</h2> <p>The Pulpit Rock is in Norway</p> <h2>Price?</h2> <p>The walk is free!</p> </div> </div> <div class="gridbox gridfooter"> <div class="footer"> <p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p> </div> </div> </div> </div> </body> </html>
屏幕变小时，三分式设计变成单列式设计
你也可以针对不同的媒体使用不同 stylesheets :
<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>Document</title> <link rel="stylesheet" href="./test2.css"> <link rel="stylesheet" href="./test1.css" media="screen and (max-width: 500px)"> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
test1.css:
div { width: 100%; }
test2.css:
* { margin: 0px; padding: 0px; } div { width: 50%; height: 100px; float: left; } .div1 { background-color: red } .div2 { background-color: blue }
注意引入的先后顺序，后引入的会覆盖前面引入的，所以条件越多的css文件越后引入
也可以使用@import和@media结合
<!DOCTYPE html> <html lang="en"> <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>Document</title> <link rel="stylesheet" href="./test2.css"> <!-- <link rel="stylesheet" href="./test1.css" media="screen and (max-width: 500px)"> --> <style> @import url(test1.css) screen and (width:500px); </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
也可以3个或以上条件：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
