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

时间：2017-12-07 18:16:00

标签： html css media-queries

我尝试通过消除不必要的下载来加速初始加载。 我将风格分为肖像和风景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

4 个答案:

答案 0 :(得分：2)

截至目前，浏览器仍然无法根据<link>属性动态加载media中的资源。

有关此功能的更深入讨论和实施，请参阅this article。

选项1：保持原样

如果您的应用程序不是那么大而风格不占用大量带宽，那么最好保持它们两者完好无损。缓存是你的朋友。初始加载可能很慢，但对资源的后续请求将通过缓存进行代理。

选项2：使用JavaScript加载样式

如果你的每个样式大约需要500KB，那么最好不要用JavaScript异步加载它们。

这将为您的应用程序增加更多的复杂性（更不用说您是否正在使用复杂的构建工具，如grunt，gulp或webpack），但它可以使初始加载更快（或至少，似乎更快。）

如果您想要追求这条路径，您可以在<body>底部添加一个小脚本来检查用户的环境，加载相应的css文件，将内容注入样式标记，并将该样式标记附加到文档<head>。

其他说明

就我个人而言，我认为将样式分为landscape样式和portrait样式并不是组织样式的最佳方式。更好的代码分离技术可能是为应用程序的不同页面设置不同的样式，并且只根据活动页面加载特定样式。 （但这仍然取决于你的布局是否很大程度上依赖于肖像/横向媒体查询）。

毋庸置疑，但这些都取决于您正在使用的环境以及您可以访问的可用服务器端解决方案。它甚至取决于您愿意为将初始加载时间减少10毫秒而付出多少努力。

我现在说你最好的选择是将两个文件合并为一个文件（因此在HTTP / 2之前加载的资源加载速度更快）并将其保存在所有页面上。在第一次加载后，它会被缓存，并且该资源将立即加载（几乎）。如果您绝对讨厌白色屏幕，请在应用程序开始时添加一个有趣的动画，以便在用户等待您的样式加载到第一个渲染时为用户提供娱乐。

答案 1 :(得分：2)

media标记中<link>属性的用途是在资源适用时决定 ，而不是加载 。它总是加载。

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

如果你考虑一下，这很有道理。所有将设备从landscape翻转到portrait所需要的只是热情的同事背后的宠物。如果在应用布局更改之前必须等待资源加载，则无法提供体面的用户体验。

规格最接近主题的是：

  

用户代理必须重新评估媒体查询，以响应他们所知道的用户环境的变化，例如，如果设备从横向到纵向平铺，并更改依赖于这些媒体的任何构造的行为相应地查询。

但是有一个重要的注意事项：大多数现代浏览器做出以下（智能）选择：他们加载<link>个资源，media属性评估为false为非 - 阻止以减少最初将页面呈现给用户所需的时间 关于这个问题的病毒One of the first articles是由凯斯克拉克写的。您可能还会发现Taylor Hunt的follow up很有趣。

如果您仍然希望根据@media查询条件加载样式表，则需要load them using JavaScript。对于JavaScript中@media查询的高效检测，我建议使用enquire.js。

答案 2 :(得分：-1)

这样的事情可以起作用

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

尝试使用此解决方案：

  1. https://stackoverflow.com/a/8101452/1964336

  2. https://stackoverflow.com/a/19675410/1964336

  3. https://css-tricks.com/resolution-specific-stylesheets/

    4. 更多解释： CSS语法：link：https://www.w3.org/TR/css3-mediaqueries/ 

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

    媒体类型可以是打印，屏幕，所有等。

答案 3 :(得分：-2)

在media属性中，使用screen and (orientation: portrait)代替(orientation: ********) 

<link rel="stylesheet" type="text/css" href="style-p.css" media="screen and (orientation: portrait)" />
<link rel="stylesheet" type="text/css" href="style-l.css" media="screen and (orientation: landscape)" />
相关问题
最新问题