我尝试在带有媒体属性的 CSS 链接上使用 rel="preload"。
一切正常，除了在 Chrome 中，媒体查询规则不适用于窗口大小调整。
这是链接:
<link href="${URLUtils.staticURL('/css/main.css')}" as="style" onload="this.rel='stylesheet'" type="text/css" rel="preload">
<link href="${URLUtils.staticURL('/css/responsive-767px-max.css')}" as="style" media="screen and (max-width: 767px)" onload="this.rel='stylesheet'" type="text/css" rel="preload">
<link href="${URLUtils.staticURL('/css/responsive-768px-979px.css')}" as="style" media="screen and (min-width: 768px) and (max-width: 979px)" onload="this.rel='stylesheet'" type="text/css" rel="preload">
<link href="${URLUtils.staticURL('/css/responsive-980px-1199px.css')}" as="style" media="screen and (min-width: 980px) and (max-width: 1199px)" onload="this.rel='stylesheet'" type="text/css" rel="preload">
<link href="${URLUtils.staticURL('/css/responsive-1200px-min.css')}" as="style" media="screen and (min-width: 1200px)" onload="this.rel='stylesheet'" type="text/css" rel="preload">
我已经在 Safari 和 Mozile 中对其进行了测试，调整大小的媒体查询规则工作得很好。它可以在没有 rel="preload"的情况下在 Chrome 中运行。
这是已知问题吗？
最佳答案
这似乎是浏览器的问题。你能在 https://crbug.com 提交错误吗？并在此处发布错误链接？然后我可以看看这个问题
关于css - 预加载的媒体查询 CSS 不适用于 Chrome 中的调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42441960/