html - 媒体查询放置会影响首次绘制的速度吗？

Question

将网站转换为 CSS 网格。我有 3 个针对 3 种屏幕尺寸的媒体查询。我想优化我的代码以提高速度。

所有查询的位置是否较高或较低会影响第一次绘制的时间？

媒体查询的顺序是否会影响移动用户看到内容的时间？

我使用内联关键路径工具在 header 中内联关键路径 css，以便页面可以在加载所有内容之前绘制。所有媒体查询都显示在此关键路径 css 中。所以我认为这意味着第一次绘制将是适合屏幕尺寸的第一次绘制。这告诉我顺序与速度无关紧要。

无论顺序如何，我的代码都能正常显示。所以不用担心这类问题。

Answer 1

一般来说，只要 a) 每个媒体查询都使用屏幕尺寸的“最小”和“最大”值，并且 b) 范围之间没有重叠，就无需担心媒体查询的顺序。由于看不到你的查询，我不知道它们是什么形状，但只要它们符合上面列出的标准，顺序应该没有什么不同。