媒体查询
2020-01-09 本文已影响0人
percykuang
媒体查询
媒体查询是一种响应式网页设计方案，核心思想就是根据视口的宽度不同从而使用不同的css，使得用户在不同尺寸屏幕上看到不同的效果，它的关键属性就是@media。下面给出一个案例让你学会使用媒体查询。
案例：
- 让视口宽度在[0, 320px]之间的页面背景色为红色
- 让视口宽度在[321px, 375px]之间的页面背景色为绿色
- 让视口宽度在[376px, 425px]之间的页面背景色为蓝色
- 让视口宽度在[426px, 768px]之间的页面背景色为紫色
- 让视口宽度在[769px, 1024px]之间的页面背景色为粉红色
index.html结构
<!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="style.css">
</head>
<body>
</body>
</html>
style.css样式
/* 1. 覆盖法 */
/* @media (max-width: 1024px) {
body {
background: pink;
}
}
@media (max-width: 768px) {
body {
background: purple;
}
}
@media (max-width: 425px) {
body {
background: blue;
}
}
@media (max-width: 375px) {
body {
background: green;
}
}
@media (max-width: 320px) {
body {
background: red;
}
} */
/* 2. 直接指定范围 */
@media (min-width: 0px) and (max-width: 320px) {
body {
background-color: red;
}
}
@media (min-width: 321px) and (max-width: 375px) {
body {
background-color: green;
}
}
@media (min-width: 376px) and (max-width: 425px) {
body {
background-color: blue;
}
}
@media (min-width: 426px) and (max-width: 768px) {
body {
background-color: purple;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
body {
background-color: pink;
}
}
