移动端页面自适应核心是正确锁住视口、用对单位、明确布局意图；viewport必须写全且置于head顶部，rem基准需内联style中用calc预设，分栏用column-width而非column-count，flex布局中calc需加min-width:0并注意空格。
移动端页面自适应不是靠“加一堆媒体查询”就能搞定的，核心是三件事：正确锁住视口、用对单位、明确布局意图。其他都是在这基础上的微调。
viewport meta 标签必须写全且位置靠前
只写 width=device-width 是无效的——iOS Safari 会回退到 980px 虚拟视口，文字小得看不清，点击区域错位。必须带 initial-scale=1.0 才能激活理想视口。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，maximum-scale=1.0和user-scalable=no按需加（表单页/游戏页建议保留） - 不要写
width=375或类似固定值，device-width是逻辑像素，会随横竖屏自动变 - 这个
<meta>必须放在最顶部，晚于任何 CSS 或 JS 都可能触发重排或闪屏
rem 基准必须在 HTML 解析阶段就确定
用 JS 在 DOMContentLoaded 里改 document.documentElement.style.fontSize 会导致文字先按 16px 渲染再跳变，用户肉眼可见“闪一下”。
- 推荐写法：
<style>html { font-size: calc(100vw / 375 * 16px); }</style>，放在内联，375 是设计稿基准宽度，可换成 320/750 等 - Safari 14 及更早不支持
calc(100vw / 375 * 1rem)这种混单位写法，必须统一用px - 别用
%或em做根字体，它们会继承、叠加，不可控
多列正文用 column-width，别碰 column-count
column-count: 3 在手机上会把文字压成窄条，根本没法读；而 column-width 是让浏览器自己决定列数，才是真响应式。
- 只设
column-width: 16rem+column-gap: 1.5rem+column-rule: 1px solid #eee，三者组合足够清晰 - 必须加
break-inside: avoid到h2、h3、p、img上，否则标题被劈成两半是常态 - 移动端断点里要重置为单列：
@media (max-width: 768px) { .article-content { column-count: 1; column-gap: 0; } }，漏掉column-gap: 0会留出大片空白
calc() 做三栏时中间内容必须加 min-width: 0
写 width: calc(100% - 480px) 后发现中间栏还是换行或溢出？大概率是 flex 容器里子项默认有最小宽度保护，强行撑开。
- 结构用
display: flex，左右侧栏设固定宽，中间栏写width: calc(100% - 480px); min-width: 0; -
calc()里+、-两侧必须有空格，calc(100%-240px)直接无效 - 避免在中间栏里放未折行的长 URL 或连续英文单词，它们会无视
calc结果强行撑宽
真正卡住人的从来不是语法，而是忘了「哪段内容该用哪种响应逻辑」：正文适合分栏，卡片适合 Grid，导航适合 Flex，而邮件模板……可能只能靠嵌套 table。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
