移动端优先需四要素齐备：正确设置viewport、用rem/vw替代px、优先grid并兼容flex、图片响应式加载。缺一不可，否则布局失效。
viewport 必须设对，否则“移动端优先”就是空谈
不加或写错 <meta name="viewport">，所有后续布局都会在手机上被强制缩放、文字糊成一片。最简但有效的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意三点：
-
width=device-width让布局视口宽度等于设备物理屏幕宽度（不是分辨率），这是移动优先的起点 -
initial-scale=1.0防止 iOS Safari 自动缩放字体导致页面错位 - 别加
user-scalable=no—— 会屏蔽用户双指缩放，违反 WCAG 可访问性要求
用 rem 或 vw 做字体和间距，别硬写 px
px 是固定单位，在高 DPR 设备（如 iPhone）上会显得过小；rem 和 vw 才能随屏幕动态缩放。推荐组合：
- 根字号用 JS 动态算：
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'（以 375px 宽为基准） - 或用 CSS 简单 fallback：
html { font-size: clamp(14px, 4.2vw, 16px); } - 所有文字、padding、margin 全部用
rem或vw，比如font-size: 1.125rem、padding: 0.75rem
硬写 12px 字体在 iPhone 上几乎不可读，这是移动端布局最常踩的坑。
栅格系统选 Flex 还是 Grid？优先用 Grid，但留一手 fallback
现代移动端布局首选 display: grid，它原生支持响应式断点控制，比 Bootstrap 的 float 栅格更干净。例如：
.container {<br> display: grid;<br> grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));<br> gap: 1rem;<br>}
但要注意兼容性：
- Android 4.4+、iOS 10.3+ 支持 Grid，老版本需降级到 Flex
- 别依赖
grid-area命名区域做关键布局——万一不渲染，整个模块就塌了 - 用
@supports (display: grid)包裹 Grid 样式，外面写一层 Flex fallback
图片和媒体必须响应式，否则首屏加载直接卡死
移动端带宽有限，一张未压缩的 2MB 图片就能让 3G 用户等 8 秒。必须做到：
- 用
<picture></picture>+srcset提供多尺寸源：<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw"> - 所有
<img>加loading="lazy"，避免非可视区图片抢占资源 - 背景图用
background-image: image-set(...)或媒体查询切换 - 禁用
width/height硬编码像素值，改用max-width: 100%+height: auto
移动端优先不是“先做 PC 再适配手机”，而是从第一行 HTML 就按小屏约束写：视口、字体、栅格、图片，四者缺一不可。漏掉任意一个，就不是真移动优先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
