我尝试通过消除不必要的下载来加快初始加载速度。 我将样式拆分为纵向和横向 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>【问题讨论】：
标签： html css media-queries
<link> 标签中的media 属性的目的是决定何时应用资源，而不是是否加载。它总是加载。
所以，简单地说，您似乎想要的是没有 JavaScript 是不可能的。当前的 CSS Editor's Draft 中没有任何内容表明它应该或将永远可以使用干净的 HTML + CSS。
如果你仔细想想，这很有意义。将您的设备从landscape 翻转到portrait 所需要的只是一位热心同事背上的宠物。如果您必须在应用布局更改之前等待资源加载，则不可能提供体面的用户体验。
规范最接近主题的是：
用户代理必须重新评估媒体查询以响应他们知道的用户环境的变化，例如，如果设备从横向平铺到纵向，并改变依赖于这些媒体的任何构造的行为相应地查询。
但是有一个重要的注意事项：大多数现代浏览器做出了以下（智能）选择：它们加载 <link> 资源，其 media 属性评估为非阻塞 false 以减少初始渲染所需的时间向用户发送的页面。
One of the first articles 在该主题上广为传播是由 Keith Clark 撰写的。您可能还会发现 Taylor Hunt 的 follow up 很有趣。
如果您仍然对基于@media 查询条件加载样式表感兴趣，则需要load them using JavaScript。对于 JavaScript 中@media 查询的性能检测，我推荐enquire.js。
【讨论】：
目前，浏览器仍然无法根据 media 属性动态加载 <link> 中的资源。
请参阅 this article 以更深入地讨论和实现此功能。
如果您的应用程序不是那么大并且样式不占用太多带宽，那么最好保持它们不变。缓存是你的朋友。初始加载可能很慢，但后续对资源的请求将通过缓存进行代理。
如果您的样式每个占用大约 500KB，您最好使用 JavaScript 异步加载它们。
这会给你的应用程序增加更多的复杂性（更不用说你是否使用了复杂的构建工具，如 grunt、gulp 或 webpack），但它可以使初始加载更快（或者至少，似乎 更快）。
如果你想走这条路，你可以简单地在你的<body> 的底部包含一个小脚本，它检查用户的环境，加载适当的 css 文件，将内容注入到样式标签中，并附加该样式标记到文档<head>。
就个人而言，我认为将样式分为landscape 样式和portrait 样式并不是组织样式的最佳方式。更好的代码分离技术可能是为应用程序的不同页面设置不同的样式，并且仅根据活动页面加载特定样式。 （但这仍然取决于您的布局是否严重依赖纵向/横向媒体查询）。
不言而喻，但这些都取决于您使用的环境以及您可以访问的可用服务器端解决方案。这甚至取决于您愿意付出多少努力来将初始加载时间缩短 10 毫秒。
我想说您现在最好的选择是将两个文件合并为一个文件（这样在 HTTP/2 之前加载的资源加载速度更快）并将其保留在您的所有页面上。第一次加载后，它会被缓存，并且该资源将（几乎）立即加载。如果您绝对讨厌白屏，请在您的应用开始时添加一个有趣的动画预加载，以在您的用户等待您的样式在第一次渲染时加载时娱乐他们。
【讨论】：
media 属性动态加载 css 资源。虽然，我知道这可能会在未来发生变化，因此我已经改写了我的答案，听起来更具前瞻性。感谢您的意见。
media 的查询在<link>s 上得到评估。如果当前不适用，则资源将异步加载，因此是非阻塞的。所以它没有做OP想要的（根本没有加载），但它确实得到了评估。这和你说的不一样。期待任何证明我错的事情。
这样的东西可以工作
<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' />
尝试使用此解决方案：
更多解释： CSS 语法：链接：https://www.w3.org/TR/css3-mediaqueries/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型可以是打印、屏幕等。
【讨论】：
screen and 会使其工作？
media="(orientation: portrait)" 不起作用。不还是CSS语法吗？
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">，你缺少only
在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)" />
【讨论】：