bootstrap中的@media媒体查询
程序员文章站
2022-05-11 10:00:36
...
<!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>Title</title>
<style>
/*当判断最小的值，并且从小到大进行判断(当满足条件的时候)：
1.向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内
2.向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖
3.写媒体查询的时候,结合经验 - 向上兼容,和向下覆盖自己的理解:
3.1.向上兼容: 类似css的属性: min-width属性，为给定元素设置最小宽度。
min-width的值会同时覆盖 max-width 和 width - 该属性具有的功能特点之一
3.2.向下覆盖: 使用媒体查询@medai判断min-width(当满足条件的时候表现出来的效果)
其实就是css三大特性中的：层叠性; 同时满足的一个屏幕宽度范围，采用就近原则，
离结构近的覆盖掉了离结构远的。
*/
/*当判断最大的值
假设一下如果我们判断最大值，例如: max-width，从小到大写,效果分析。
max-width: 992px:宽度在992以下
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
max-width: 1200px:宽度在1200以下
@media screen and (max-width: 1200px) {
body {
background-color: pink;
}
}
max-width: 1200px和max-width: 992px
(当都满足条件范围时的时候, 采用就近原则! max-width: 1200px,就会把max-width: 992px给层叠掉)
导致的错误效果是: body始终都为pink颜色。
/*书写建议：
1.如果是判断最小值 (min-width)，那么就应该从小到大写 -- bootstrap就是判断最小值，从小到大写
2.如果是判断最大值 (max-width)，那么就应该从大到小写*/
body {
background-color: red;
}
/*屏幕的宽度大于1200px */
@media (min-width: 1200px) {
body {
background-color: purple;
}
}
以下是判断最大值(max-width)，从大到小写
/*屏幕的宽度小于1200*/
@media screen and (max-width: 1200px) {
body {
background-color: pink;
}
}
/*屏幕的宽度小于992的时候*/
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/*屏幕的宽度小于768px*/
@media screen and (max-width: 768px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<!--需求：
默认情况下，body的背景色：red
w<768 green
w:768~992 blue
w:992~1200 pink
w>1200:purple-->
</body>
</html>