gpt4 book ai didi

html - 使用媒体查询消除样式加载

转载 作者:太空宇宙 更新时间:2023-11-04 15:53:47 25 4
gpt4 key购买 nike

我试图通过消除不必要的下载来加快初始加载速度。我将样式分为纵向和横向 css。并且只想加载基于媒体查询的一种样式。但似乎它们是一起加载的。

<body>
<link rel="stylesheet" type="text/css" href="style-p.css" media="(orientation: portrait)" />
<link rel="stylesheet" type="text/css" href="style-l.css" media="(orientation: landscape)" />
</body>

enter image description here

最佳答案

media的目的| <link> 中的属性标记决定资源何时应用,而不是它是否加载。它始终加载。


所以,简单地说,您似乎想要的东西没有 JavaScript 是不可能的。当前 CSS 中没有任何内容 Editor's Draft表明它应该或将永远可以使用干净的 HTML + CSS。

如果你仔细想想,这很有道理。从 landscape 翻转您的设备所需的一切至 portrait是热心同事背上的宠物。如果在应用布局更改之前必须等待资源加载,则不可能提供体面的用户体验。

规范最接近主题的是:

User agents must re-evaluate media queries in response to changes in the user environment that they’re aware of, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.

但是有一个重要的注意事项:大多数现代浏览器做出以下(智能)选择:它们加载 <link>资源 media评估为 false 的属性作为非阻塞以减少最初向用户呈现页面所需的时间。
One of the first articles在这个主题上走红是由基思·克拉克 (Keith Clark) 撰写的。您可能还会找到 Taylor Hunt 的 follow up有趣。


如果您仍然对加载基于 @media 的样式表感兴趣查询条件,需要load them using JavaScript .用于 @media 的性能检测在 JavaScript 中查询,我推荐 enquire.js .

关于html - 使用媒体查询消除样式加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47701332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com