link标签不支持按屏幕方向自动切换预加载的样式表，media属性仅在页面加载时判断一次条件，无法响应orientation变化；需用javascript监听resize事件配合matchmedia实现动态加载，或优先采用单css文件中的@media规则。
link 标签不支持按屏幕方向预加载样式表
HTML 的 <link> 标签本身没有原生机制能根据 orientation（横屏/竖屏）动态预加载不同 CSS 文件。rel="preload" 只能声明资源路径、类型和基本条件（如 media），但不触发条件切换时的自动加载或切换——它只预加载，不激活。
media 属性能限制 preload 时机，但不能“响应式切换”
media 属性在 <link rel="preload"> 中仅用于判断“当前是否满足条件”，满足才发起请求；它不会监听 orientation 变化，也不会在旋转后自动加载另一份 CSS。
- ✅ 正确用法：
<link rel="preload" href="landscape.css" as="style" media="(orientation: landscape)">—— 页面加载时若设备处于横屏，则预加载landscape.css - ❌ 错误期待：旋转屏幕后，浏览器不会自动 fetch 竖屏版本或卸载横屏版本
- ⚠️ 注意：
media在 preload 阶段只做一次求值，不是 reactive 条件
真正响应屏幕方向变化，得靠 JavaScript + 动态 link
要实现“旋转即加载对应样式”，必须放弃纯 HTML 方案，改用 JS 监听 resize 或 orientationchange 事件，手动插入/切换 <link rel="stylesheet">。
-
orientationchange事件兼容性差（iOS Safari 旧版支持，现代浏览器已弃用），推荐用resize+window.matchMedia("(orientation: landscape)") - 避免重复加载：检查
document.querySelector('link[data-orientation]')是否已存在对应方向的 link，有则跳过 - 预加载可配合使用：提前用
rel="preload"加载两份 CSS，再用 JS 控制何时启用——这样既利用预加载提速，又保持响应能力
<link rel="preload" href="portrait.css" as="style" media="(orientation: portrait)"><link rel="preload" href="landscape.css" as="style" media="(orientation: landscape)">
别忽略 CSS 媒体查询才是更轻量可靠的方案
绝大多数场景下，用单个 CSS 文件 + @media (orientation: landscape) 就足够了。它比动态加载更简单、无竞态、不阻塞渲染，且浏览器会按需解析对应规则。
- 预加载+JS切换适合极端情况：比如横屏 CSS 超过 200KB，且你确定用户几乎从不旋转设备
- 注意：动态插入
<link>会触发额外 CSS 解析和重排，可能造成短暂闪动 - 移动端 viewport 设置不当（如未设
viewportmeta）会导致orientation媒体查询失效，这是常见隐形坑
@media 的单一 CSS，再测性能瓶颈；只有明确 profile 出 orientation 切换导致显著延迟时，才值得引入预加载+JS 动态加载这套组合拳。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
