媒体查询的位置是否会影响初涂的速度？

Question

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

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

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

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

无论顺序如何，我的代码都可以正常显示。因此，不必担心此类问题。

Answer 1

通常，无需担心媒体查询的顺序，只要a）每个媒体查询使用“最小”和“最大”值作为屏幕尺寸，并且b）范围之间没有重叠。由于看不到您的查询，因此我不知道它们的形状，但是只要它们符合上面列出的标准，顺序就不会有所不同。