媒体查询最小宽度不考虑以下设备以下的设备



当设备宽度小于" 375"时,为什么某些设备不听我的媒体查询,这是我最小的断点。我使用@media(最小宽度:375px){//在这里} ...我知道它"需要"该设备必须至少" 375px"宽,但是我在这里不知道这是什么问题。当我将375- breakpoint更改为0px时,它可以工作...但是这是一种正确的方法吗?

在我的" Media.scss"文件中,我都像这样设置了所有内容:

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

一切正常,但是在小于375像素的设备上进行测试时,它不考虑规则。我希望你明白我的意思。我看了Bootstrap如何具有他们的媒体查询,我无法真正判断是否有任何区别。

无论您使用移动优先还是桌面 - 第一方法,都需要在应用媒体查询的 none 时使用的一些样式。在您的示例中,有 no 样式适用于375px以下的宽度。如果您简单地将第一个查询(< 375)内的CSS规则放在该查询中并将其放在样式表的一开始。

,很可能没关系。 。

或所说的不同:只需在开始时擦除@media (min-width: 375px) {及其关闭的}支架,这些样式将适用于768px以下的所有宽度(也适用于375px较窄的宽度)

用最大宽度创建媒体查询:374px并将CSS插入其中。

最新更新