不能直接实现。link标签的media属性仅在页面加载时静态匹配orientation媒体特性，不响应设备旋转等运行时变化；需配合JavaScript监听window.matchMedia("(orientation: portrait)")事件并切换disabled状态才能可靠实现方向适配。
link标签能根据设备方向加载样式表吗
不能直接实现。<link> 标签本身不支持监听或响应 orientationchange 事件，也没有 media 查询能匹配“当前设备方向是横屏还是竖屏”这种动态状态——screen 媒体查询只基于初始视口宽高比（width/height），不随旋转实时更新。
用 media 属性模拟方向切换的常见误区
很多人尝试写这样的代码：
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)"><br><link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
这看似合理，但实际效果受限于浏览器行为：(orientation: portrait) 和 (orientation: landscape) 是 CSS 媒体特性，仅在页面加载/重排时评估一次，且部分安卓 WebView、旧版 Safari 不触发重计算；用户旋转设备后，样式通常不会自动切换。
- Chrome Desktop 模拟器中旋转可能不触发媒体查询重匹配
- iOS Safari 在某些版本中会延迟甚至跳过 orientation 媒体查询更新
- 即使匹配生效，也依赖
viewport设置正确（必须含width=device-width）
真正可靠的方案：用 JavaScript 监听并切换 link 的 disabled 状态
手动控制 <link> 的 disabled 属性，配合 window.matchMedia() 或 orientationchange 事件，才是稳定做法。
立即学习“前端免费学习笔记（深入）”；
- 优先用
window.matchMedia("(orientation: portrait)")，它支持监听变化，兼容性好（IE10+） - 避免依赖
orientationchange事件，该事件在 iOS 12+ 已被弃用，且安卓行为不一致 - 确保两个
<link>都加载进 DOM，初始设为disabled="true"，由 JS 控制启用哪一个
示例：
<link id="portrait-css" rel="stylesheet" href="portrait.css" disabled><br><link id="landscape-css" rel="stylesheet" href="landscape.css" disabled><br><br><script><br> const portraitLink = document.getElementById('portrait-css');<br> const landscapeLink = document.getElementById('landscape-css');<br><br> const mql = window.matchMedia('(orientation: portrait)');<br> const updateOrientation = () => {<br> if (mql.matches) {<br> portraitLink.disabled = false;<br> landscapeLink.disabled = true;<br> } else {<br> portraitLink.disabled = true;<br> landscapeLink.disabled = false;<br> }<br> };<br><br> updateOrientation();<br> mql.addEventListener('change', updateOrientation);<br></script>
为什么不用 @import 或动态创建 link
动态插入新 <link> 或用 @import 在 CSS 中加载另一份样式，都会引入额外网络请求和渲染阻塞，且无法保证加载顺序与缓存复用。而预置两个 <link> 并仅切换 disabled，所有资源在页面解析阶段就已发起请求，切换时无延迟、无 FOUC。
关键点在于：媒体查询的 orientation 特性不可靠，但它是唯一标准方式；真要响应旋转，就得用 JS 主动干预 —— 这不是 hack，而是当前 Web 平台的事实约束。
