如何解决CSS 中的媒体无法使用最大宽度
我正在尝试在 scss 中进行媒体查询,但没有奏效。我有这样的代码
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<style>
body {
background: red;
}
@media (min-width: 460px) {
body {
background: yellow;
}
}
@media (max-width: 459px) {
body {
background: black;
}
}
</style>
现在没有媒体查询适用于宽度 459px 并且背景为红色...(黑色最大为 458,黄色为 460) 但是当我改为
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
body {
background: red;
}
@media (min-width: 460px) {
body {
background: yellow;
}
}
@media (max-width: 460px) {
body {
background: black;
}
}
</style>
然后黑色背景适用于 459 像素,但在 460 像素上有两个媒体查询正在工作... 如何在最大宽度上解决这个问题,我只有黑色背景,而在最小宽度上只有黄色?
解决方法
我会采用不同的方式:首先定义一个通用规则,然后为较小的屏幕定义一个媒体查询,如下所示:
body {
background: yellow;
}
@media (max-width: 460px) {
body {
background: black;
}
}
或者反过来,使用移动优先的方法:
body {
background: black;
}
@media (min-width: 460px) {
body {
background: yellow;
}
}
这两种方式肯定没有宽度会导致两个设置发生碰撞,也没有宽度没有设置将完全适用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。