本文最后更新于：November 4, 2022 pm
响应式开发注意事项
https://www.kancloud.cn/xiak/quanduan/839151
移动优先：媒体查询代码的书写顺序
注意移动优先，任何时候，媒体查询代码都有写在后面，否则因为css覆盖特性而可能不会生效，而不在媒体查询之内的代码默认就为移动端的。 （媒体查询代码的书写顺序对css覆盖特性的影响和普通代码是一样的）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| .login-btn {
border: 1px #828282 solid;
padding: 5px 12px !important;
border-radius: 15px;
font-size: 15px;
margin-top: 18px;
}
/* 平板时的导航样式 768px <= x < 992px */
@media (min-width: 768px) and (max-width: 992px) {
.navbar .container {
width: 100%;
}
.navbar-nav>li>a {
padding: 20px;
}
.login-btn {
// 如果顺序不对，这里会被覆盖
margin-top: 13px;
}
}
--------------------------
要特别注意以下书写规则，不按照这个规则书写，会有问题
@media (min-width: a){}
@media (min-width: b){}
@media (min-width: c){}
这里 a < b < c
@media (max-width: a){}
@media (max-width: b){}
@media (max-width: c){}
这里 c < b < a
|
