学习: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
1. min-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media screen and (min-width: 400px) {
body {
color: red;
}
}
/* @media screen and (min-width: 800px) {
body {
color: blue;
}
} */
</style>
<body>
<h1>你好世界</h1>
</body>
</html>
效果: 当屏幕>400px的时候 字变为红色
min-width理解为, 当屏幕宽度达到了最小宽度400px,那么该媒体查询生效
2. max-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media screen and (max-width: 400px) {
body {
color: red;
}
}
</style>
<body>
<h1>你好世界</h1>
</body>
</html>
效果: 当屏幕<400px的时候 字变为红色
max-width理解为, 当屏幕宽度达到了最大宽度400px以内,那么该媒体查询生效
记忆: min记>, max记为< 反记