CSS媒体在一组设备上不工作

Question

我已经为我正在进行的一个项目写了媒体查询。我的chrome上的整个设备在三星、像素和I-手机上都能正常工作，但在Infinix和tecno手机上就不行了。这些是我使用的媒体查询。

@media (max-width: 320px)
@media (min-width: 360px) and (max-width: 384px)
@media (max-width: 768px)

我的chrome设备模拟器上的所有设备都能正常工作，但是当我检查mt infinix和tecno手机时，它却不能正常工作。检查屏幕截图 为技术 对于无穷大 用于三星 对于iphone后面两个导航显示的很好，但前两个导航就不行了。

Answer 1

给这些断点一个尝试。他们在Bootstrap中使用

@media (max-width: 575.98px) {
  ...
}
@media (min-width: 576px) and (max-width: 767.98px) {
  ...
}
@media (min-width: 768px) {
  ...
}

最好的做法是在你的@媒体中没有空白，因为有很多设备你无法测试。

不要以设备为单位，而是以"@媒体范围 "为单位。如果网页在每个@媒体范围内看起来都很好，那么它在所有设备上看起来都很好。

Answer 2

正如你的截图中所检查的那样。

问题似乎不在于媒体查询，而是在于你的css代码的跨浏览器支持。

你是否使用了flexbox或任何其他css3方法？ 如果是，那么添加css自动前缀代码的浏览器回退。

你也可以使用一些在线工具，如pleeease.io来获取浏览器自动后缀代码。

Answer 3

我最初并没有使用flexbox或grid。我用了它们，问题就解决了。