less中横竖屏媒体查询需用标准css语法编写，不可依赖运行时检测；推荐用@media (min-aspect-ratio: 13/9)和@media (max-aspect-ratio: 9/13)替代兼容性差的orientation，并通过mixin封装方向逻辑实现样式复用。
Less里怎么写横竖屏媒体查询？
Less本身不识别orientation这类动态值，它只做编译时变量替换和嵌套展开。所以不能像JS那样“运行时检测方向”，只能靠预定义的媒体查询断点来生成对应CSS规则。核心是用@media直接写标准语法，别指望Less自动帮你判断。
横屏和竖屏的媒体查询写法差异在哪？
关键区别在min-aspect-ratio和orientation两种写法——前者更可靠，后者在部分安卓浏览器（尤其旧版WebView）中会失效或误判。推荐优先用宽高比判断：
-
@media (min-aspect-ratio: 13/9)—— 大致覆盖常见横屏（如16:9、4:3） -
@media (max-aspect-ratio: 9/13)—— 对应竖屏（如9:16、3:4） -
@media (orientation: landscape)—— 简洁但兼容性差，iOS Safari尚可，部分Android Chrome返回portrait即使设备横着放
如何复用样式避免重复写两遍？
用Less的.mixin封装通用结构，把方向相关的属性抽成参数。比如：
.screen-layout(@dir) when (@dir = landscape) {
width: 100vw;
height: 50vh;
}
.screen-layout(@dir) when (@dir = portrait) {
width: 50vw;
height: 100vh;
}
@media (min-aspect-ratio: 13/9) {
.container { .screen-layout(landscape); }
}
@media (max-aspect-ratio: 9/13) {
.container { .screen-layout(portrait); }
}
注意：不要用@media (orientation: ...)做when条件，因为Less编译时根本不知道运行时方向。
为什么编译后CSS没生效？常见坑有哪些？
最常踩的三个点：
- 把
@media写在.mixin内部又没正确调用——Less不会自动展开未被引用的媒体查询 - 用了
orientation但测试设备开启了“强制竖屏”或系统级旋转锁定，此时浏览器根本不触发横屏样式 - aspect-ratio值设得太死，比如
16/9在iPhone 12（19.5:9 ≈ 2.17）上不匹配，建议放宽到13/9（≈1.44）或2/1
真要响应式切换，得靠JS监听resize或orientationchange事件配合class切换，Less只负责把不同class下的样式写全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
