媒体查询使用
2017-11-02 本文已影响0人
走在风口的猪
现在，一般我们在写PC端代码时都是响应式布局的，但是有时候，我们还是需要用到媒体查询的，话不多说，老规矩，上代码。
第一种：最大到多少 --max-width:xxx px
@media screen and (max-width: 1400px){
xxxxxxxxxxxxx代码块xxxxxxxxxxxxxxxxxxx
}
G))QI0OFIFT0_X70EO9G6W0.png
第二种：最小到多少，下面举例，min-width:xxx px
@media screen and (min-width:1400px) {
xxxxxxxxxxxxx代码块xxxxxxxxxxxxxxxxxxx
}
image.png
第三种：最小多少到最大多少之间，下面举例，min-width:xxx px and max-width:xxx px
@media screen and (min-width:1400px) and (max-width:1920px){
xxxxxxxxxxxxx代码块xxxxxxxxxxxxxxxxxxx
}
)K7T3)7TRSZ3QW3`)CB(P04.png
下面是小例子（虽然我觉得确实很丑）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.box{
width: 100%;
height: 100%;
}
@media screen and (max-width: 1400px){
.box{
background: yellow;
}
}
@media screen and (min-width:1400px) and (max-width:1920px){
.box{
background: blue;
}
}
@media screen and (min-width:1920px) {
.box{
background: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
示例的三种状态
NO.1
G))QI0OFIFT0_X70EO9G6W0.png
NO.2
image.png
NO.3
)K7T3)7TRSZ3QW3`)CB(P04.png
