逻辑属性与媒体查询分工协作：媒体查询负责断点式布局切换（如导航栏横竖排），逻辑属性解决rtl/ltr方向适配（如margin-inline-start）。二者组合覆盖尺寸与方向双重需求，避免冗余和维护困难。
逻辑属性不替代媒体查询，而是和它配合解决不同层级的问题：媒体查询管“布局切换”，逻辑属性管“方向适配”。
媒体查询适合做断点式布局切换
当你要让一个导航栏在手机上收成汉堡菜单、在桌面展开为横排导航，就必须用 @media。它的核心价值是根据视口宽度、设备类型、朝向等条件，批量启用或禁用整套样式规则。
- 常见错误是把所有适配都堆进
@media：比如给每个margin-left都写三套，既冗余又难维护 - 真正该放进媒体查询的，是结构性变化——栅格列数、flex方向、display值、字体缩放比例等
- 推荐断点策略：用
min-width而非max-width，符合移动优先原则；例如@media (min-width: 768px)表示“≥平板才生效”，后续规则自然继承手机基础样式 - 注意
orientation的实际触发时机：iOS Safari 在 Safari 浏览器中旋转时会触发，但某些 WebView（如微信内置）可能不响应，别依赖它做关键功能切换
逻辑属性解决文本方向带来的布局翻转
阿拉伯语、希伯来语等 RTL 语言下，margin-left 会跑到右边，text-align: left 实际对齐的是内容末尾。这时用 margin-inline-start 和 text-align: start 就能自动适配，无需 JS 切换 class 或重复写 RTL 专用样式。
- 必须配合 HTML 的
dir属性使用，仅靠 CSS 无法自动识别语言方向 -
inline-start/inline-end对应文字流方向，block-start/block-end对应段落流向，别和物理方向混淆 - Flexbox 中
justify-content: start比flex-start更语义清晰，且在 RTL 下自动右对齐 - 注意兼容性：
inset-inline-start等新属性在 Safari 15.4+ 才稳定支持，旧版本需回退到left/right
两者组合才能覆盖真实业务场景
比如一个带图标和文字的按钮，在中文 LTR 下左图标右文字，在阿拉伯语 RTL 下要变成右图标左文字，同时在小屏上还要纵向堆叠。这时候单靠一种方案搞不定：
- 用
@media (max-width: 480px)控制flex-direction: column—— 这是尺寸导致的结构变化 - 用
[dir="rtl"] .btn { flex-direction: row-reverse; }或直接写flex-direction: row-reverse配合逻辑属性 —— 这是方向导致的顺序翻转 - 图标位置用
margin-inline-end: 0.5rem，而不是margin-right，确保在 RTL 下依然紧贴文字 - 避免嵌套过深：不要在
@media里再写一套[dir="rtl"]，而是在顶层定义逻辑属性，让媒体查询只负责尺寸维度
最容易被忽略的是「设备像素比」和「视口缩放」对媒体查询的影响：iPhone 的 DPR=3，但 width 媒体特征检测的是 CSS 逻辑像素（即 viewport 宽度），不是物理像素。如果你用设计稿的 750px 直接当断点，而没配好 <meta name="viewport">，那断点就完全错位了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
