CSS：媒体查询延迟

Question

我的网站有一个错误，我怀疑是媒体查询出了问题。有些样式应用如下：

.main {
      border:1px solid black;
}

@media screen and (max-width: 350px) {
   .main {
      border:1px solid red;
   }
}

当然，这些只是例子，我的样式更加复杂。

当我直接打开宽度小于350像素的网页时，我可以看到原始的CSS规则（border:1px solid black;）在媒体查询应用之前会持续1秒钟。在旧设备上更为明显（CPU性能？）。

但是，当我将浏览器宽度改变为小于350像素时，媒体查询就会平稳地应用。

问题：我该如何解决这个问题？

- Oel

---

可能是因为网络问题或性能问题。请在jsfiddle或codepen等网站上准备演示，以便我们可以体验相同的情况。 - Sagar

@Sagar 我不确定是因为网络问题还是CSS没有被分块加载。对我来说更像是CPU的问题，但也不确定... - Oel

在iPhone上遇到了相同的问题。 - catamphetamine

只有在 iPhone 上出现相同的问题 :-/ - Simon_Weaver

Answer 1

你尝试过同时使用媒体查询的最小和最大宽度吗？

请查看以下内容：

@media screen and (max-width: 350px) and (min-width: 0px) 
{
  Your Styles
}

- user10142451

Answer 2

.main {
      border:1px solid red;
}

@media screen and (min-width: 350px) {
   .main {
      border:1px solid black;
   }
}

- Akil Makda