學習: 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記爲< 反記