极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<style type="text/css">
#demo {
width: 100px;
height: 100px;
}
@media (max-width: 991px) {
#demo {
border-style: solid;
border-bottom-width: 10px;
border-color: black;
}
}
@media (min-width: 991px) {
#demo {
border-style: solid;
border-color: red;
border-left-width: 10px;
}
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
在宽度刚好等于 991 的情况下出现这个问题
就是媒体查询 min-width: 991px 和 max-width: 991px 都生效了一部分的css
而 border-color: black; 没有生效. 导致样式混乱
有没有什么好点的解决方案?
因为正常逻辑, 应该有如下三类样式
- 公共样式 : 任何时候都具备的样式
媒体查询的样式 : 根据屏幕宽度的变化修改样式, 分为以下三类 (比如定义的断点为991)
大于991的样式 小于991的样式 等于991的样式
如何定义一个媒体断点, 仅仅生效当前媒体查询的样式和公共样式?
当大于 991 px是只生效当前的和公共的, 以上其他2类全部失效?
你可以加一个确切的值放在最后面