将网站转换为 CSS 网格。我有 3 个针对 3 种屏幕尺寸的媒体查询。我想优化我的代码以提高速度。
所有查询的位置是否较高或较低会影响第一次绘制的时间?
媒体查询的顺序是否会影响移动用户看到内容的时间?
我使用内联关键路径工具在 header 中内联关键路径 css,以便页面可以在加载所有内容之前绘制。所有媒体查询都显示在此关键路径 css 中。所以我认为这意味着第一次绘制将是适合屏幕尺寸的第一次绘制。这告诉我顺序与速度无关紧要。
无论顺序如何,我的代码都能正常显示。所以不用担心这类问题。
最佳答案
一般来说,只要 a) 每个媒体查询都使用屏幕尺寸的“最小”和“最大”值,并且 b) 范围之间没有重叠,就无需担心媒体查询的顺序。由于看不到你的查询,我不知道它们是什么形状,但只要它们符合上面列出的标准,顺序应该没有什么不同。
关于html - 媒体查询放置会影响首次绘制的速度吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55836334/