css - 媒体查询最小宽度不考虑低于一定宽度的设备

Question

当设备宽度小于“375”(我的最小断点)时，为什么有些设备不听我的媒体查询。我使用@media (min-width: 375px) {//Rules here }...我知道它“要求”设备必须至少有“375px”宽，但我不知道这里出了什么问题.当我将 375 断点更改为 0px 时它起作用了……但这是否是一种正确的方法？

在我的“media.scss”文件中，我的设置如下:

@media (min-width: 375px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1280px) {}

一切正常，但在小于 375 像素的设备上测试时，它不考虑规则。我希望你明白我的意思。我查看了 bootstrap 如何进行媒体查询，但我无法确定是否存在任何差异。

Answer 1

无论您使用移动优先还是桌面优先方法，您都需要一些在没有媒体查询适用时应用的样式。在您的示例中，没有 样式适用于 375 像素以下的宽度。如果您只是将第一个查询 (<375) 中的 CSS 规则从该查询中提取出来，并将其放在样式表的最开头，则很可能没问题。

或者说区别:只需删除开头的@media (min-width: 375px) {及其结束的}括号，那么这些样式将适用于所有宽度低于 768px(也适用于宽度小于 375px 的宽度)