@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,说白了就是对样式的重置;
媒体类型:
all | 适用于所有设备 |
screen | 用于PC端,智能手机,平板中 |
应用于打印机或打印预览 | |
speech | 用于屏幕阅读器等发声设备 |
媒体功能:
min-width:适用于PC端和移动端
min-device-width:只适用于移动端
当使用min-的时候,从小到大排布:
body {
background: red
}
@media screen and (min-width: 750px) {
/* 当最小值是750px的时候 */
body {
background: blue
}
}
@media screen and (min-width: 950px) {
/* 当最小值是950px的时候 */
body {
background: skyblue
}
}
@media screen and (min-width: 1050px) {
/* 当最小值是1050px的时候 */
body {
background: pink
}
}
当使用max的时候,从大往小排布:
body {
background: red
}
@media screen and (max-width: 1050px) {
/* 当最小值是750px的时候 */
body {
background: blue
}
}
@media screen and (max-width: 950px) {
/* 当最小值是950px的时候 */
body {
background: skyblue
}
}
@media screen and (max-width: 750px) {
/* 当最小值是1050px的时候 */
body {
background: pink
}
}
通过媒体查询实现页面排布的案例,超过1000px一行4个,700px放三个,400px两个,小于400 放1个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>@media查询 排布</title>
<style>
.con {
width: 100%;
height: 600px;
}
.con div {
width: 100%;
height: 300px;
background: pink;
border: 1px solid blue;
float:left;
}
@media screen and (min-width: 400px) {
.con div {
width: 49%;
}
}
@media screen and (min-width: 700px) {
.con div {
width: 32.33%;
}
}
@media screen and (min-width: 1000px) {
.con div {
width: 24%;
}
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>