必须添加正确的标签并置于最前，width=device-width与initial-scale=1.0缺一不可；优先使用flex/grid布局、语义化HTML、rem字体、srcset图片及容器级媒体查询。
没加 <meta name="viewport"> 标签，所有响应式行为都白搭——手机浏览器默认按 980px 渲染，页面会缩成一团，连点击都困难。
viewport 标签必须写对位置和参数
它得放在 最前面，且不能被 JS 动态插入；否则 iOS Safari 或某些安卓 WebView 可能根本不认。
-
width=device-width是核心，不能写死成width=375或width=414，否则 iPad、折叠屏、横屏手机全错位 -
initial-scale=1.0不可省略，部分安卓 WebView 默认缩放 0.8–0.9，文字直接糊成一片 - 别加
maximum-scale=1.0或user-scalable=no：这会锁死双击放大，违反 WCAG 可访问性要求，iOS 还可能在某些版本里禁用 pinch-zoom
用 flex/grid 布局而非 float + 百分比
float 布局在小屏换行时容易塌陷，且无法控制主轴/交叉轴对齐；百分比宽度在嵌套多层后误差会累积。现代专题页该用语义化容器 + 弹性布局。
-
<main></main>包裹主体内容流，<section></section>按业务模块切分（如“活动规则”“参与方式”“奖品清单”），不是为了套 class 而加 - 横向卡片组用
display: flex+flex-wrap: wrap，小屏自动折行；避免靠float: left+width: 32%硬撑三栏 - 关键区域（如 banner 图、CTA 按钮）用
max-width: 100%+height: auto，防止图片撑破容器
媒体查询断点要按内容定，不是按设备型号
写 @media (max-width: 768px) 是常见误区——iPad Pro 逻辑宽度是 1024px，但竖屏内容区往往只够 700px 宽；而很多安卓平板实际渲染宽度是 800px，却卡在“768px 以下”分支里。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
em单位断点：@media (min-width: 48em)（即 ≥768px），更稳定，也兼容字体缩放场景 - 断点触发逻辑应基于容器宽度而非视口：比如一个卡片容器最大宽 1200px，那它的子项换行点就该设在
container > * { width: 100%; }的临界值，而不是盲目套“手机/平板/桌面”三段式 - 避免在 CSS 里硬写
html { font-size: 14px; }来适配 rem，真实设备宽度 ≠ 断点数值；要用 JS 动态算：document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';
图片和字体必须脱离 px 依赖
专题页常有大图 banner、活动图标、阶梯式标题，一旦用 px 写死尺寸，缩放或换设备就失真。
- 字体统一用
rem，根字号动态计算；标题层级用1.5rem/1.25rem等比例，别写24px/20px - 图片优先上
srcset+sizes，比如：<img src="banner-320.jpg" srcset="banner-320.jpg 320w, banner-768.jpg 768w, banner-1200.jpg 1200w" sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1100px" alt="HTML怎么构建响应式专题模板" > - 纯色按钮、分割线等装饰元素，用
vh/vmin控制尺寸，比如height: 4vmin，确保在任意屏幕下视觉比例一致
最易被忽略的一点：键盘弹出时 iOS 视口高度突变，但 clientWidth 不变，导致 rem 基准错乱；得监听 focus 事件临时调小 font-size，失焦再恢复。
