正确写法是screen and (orientation: landscape)，漏掉screen and会导致退化为all；orientation仅在html解析时判断一次，旋转屏幕不会重新加载css；ios safari存在orientation误判问题，建议优先用宽度判断。
media="(orientation: landscape)" 只在横屏时加载 CSS，但必须写对语法
浏览器只认 orientation: landscape 或 orientation: portrait 这两种写法，且必须和 screen 类型组合使用。单独写 media="(orientation: landscape)" 会退化为 all，导致样式无条件加载。
正确写法必须是：screen and (orientation: landscape)。常见错误包括：
- 漏掉
screen and，直接用括号开头 - 写成
media="landscape"（这不是合法媒体类型） - 在括号里加空格或大小写错误，比如
(Orientation: landscape)
注意：orientation 是运行时动态值，但 <link media> 只在 HTML 解析阶段判断一次——页面加载后旋转屏幕，已跳过的 CSS 不会补加载，已加载的也不会卸载。
横屏样式表不会自动覆盖竖屏样式，顺序和选择器权重才决定效果
如果同时引入了竖屏和横屏两份 CSS，比如：
<link rel="stylesheet" href="portrait.css" media="screen and (orientation: portrait)"><link rel="stylesheet" href="landscape.css" media="screen and (orientation: landscape)">
那么两者不会“互斥生效”，而是取决于当前 orientation 匹配哪一条。但若某设备初始以竖屏加载，之后旋转为横屏，landscape.css 根本没请求过，自然不会应用——这和 @media 规则的行为完全不同。
所以实际项目中更稳妥的做法是：
- 只用一份 CSS，内部用
@media (orientation: landscape)控制规则 - 若坚持分文件，需搭配 JavaScript 监听
resize或orientationchange，手动切换<link disabled>状态（但仍有 FOUC 风险） - 确保两份 CSS 中相同选择器的规则权重一致，避免因加载顺序意外覆盖
iOS Safari 的 orientation 判断有延迟和误判，别全信 media 属性
iOS Safari 在页面刚加载、键盘弹出、地址栏收起等场景下，orientation 媒体查询可能返回错误值（比如竖屏报告为 landscape），尤其在 iPad 上更明显。这不是 bug，是其 viewport 计算逻辑导致的。
因此：
- 不要用
orientation做关键布局分支（比如隐藏核心导航） - 优先用宽度判断：
screen and (min-width: 768px)比orientation: landscape更稳定 - 若必须依赖方向，建议用 JS 获取
window.matchMedia("(orientation: landscape)")并监听变化，比纯 HTMLmedia属性响应更快、更准
调试时看不到未匹配的 link 请求，别以为路径错了
Chrome DevTools 的 Network 面板里，根本不会出现 media 不匹配的 CSS 请求——它压根不发 HTTP 请求。如果你写了 <link rel="stylesheet" href="land.css" media="(orientation: landscape)">，但当前是竖屏，那 land.css 就像不存在一样，Network 里搜不到它。
容易误判为路径错误或服务器问题，其实只需打开 Elements 面板，看该 <link> 标签是否被浏览器标记为 “inactive”（灰色文字）即可确认是否被跳过。真要验证是否加载，得切到横屏再刷新，或用 window.matchMedia 手动测试匹配结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
