移动端与 viewport：rem、safe-area 与 1px 高清适配

系列文章目录

《JavaScript 基础与进阶笔记》（前期偏基础巩固与常见面试点，后续进入闭包、异步、工程化等进阶主题）

• 第 01 篇：数据类型与类型判断
• 第 02 篇：变量声明与作用域
• 第 03 篇：闭包与高阶函数
• 第 04 篇：函数工厂
• 第 05 篇：this 指向与绑定
• 第 06 篇：原型与原型链
• 第 07 篇：类与继承
• 第 08 篇：JS 执行机制与异步队列
• 第 09 篇：数组常用方法
• 第 10 篇：字符串算法
• 第 11 篇：常见手写题合集（上）
• 第 12 篇：常见手写题合集（下）
• 第 13 篇：Promise 与 async/await
• 第 14 篇：数据结构基础
• 第 15 篇：垃圾回收与内存
• 第 16 篇：DOM 基础全面解析
• 第 17 篇：DOM 性能与渲染
• 第 18 篇：DOM 交互补充
• 第 19 篇：DOM 实战案例
• 第 20 篇：CSS 布局与可视化高频
• 第 21 篇：移动端与 viewport（本文）

前言

第 20 篇讲了 Flex/Grid 等布局能力；移动端还要解决另一层问题：视口怎么定、尺寸怎么随屏幕变、刘海和底部横条怎么避开、高清屏下 1px 和图片怎么不糊。本篇按「viewport → 移动优先 → rem/vw/clamp → safe-area → 1px/高清图」展开，附最小示例与面试易混点。CSS 阶段在此收束，下一篇进入BOM 与浏览器 API。

一、viewport 视口

1.1 为什么需要 meta viewport

手机浏览器默认会把页面缩小放进「布局视口」（常见约 980px 宽），再让用户双指缩放。不设 viewport，移动端会像「缩小版桌面页」，字体极小、需手动放大。

<metaname="viewport"content="width=device-width, initial-scale=1.0"/>

逻辑像素 vs 物理像素：window.devicePixelRatio（DPR）= 物理像素 / CSS 像素。iPhone 常见 DPR 为 2 或 3，影响 1px 边框与图片清晰度（见 §六、§七）。

二、移动优先与媒体查询

2.1 移动优先（Mobile First）

默认写小屏样式，再用min-width逐步增强大屏——比「先写桌面再max-width覆盖」更易维护、CSS 更少。

/* 基础：手机 */.container{padding:0 16px;}.grid{display:grid;grid-template-columns:1fr;gap:12px;}/* 平板及以上 */@media(min-width:768px){.grid{grid-template-columns:repeat(2,1fr);gap:20px;}}/* 桌面 */@media(min-width:1024px){.container{max-width:1200px;margin:0 auto;}.grid{grid-template-columns:repeat(3,1fr);gap:24px;}}

2.2 常用断点（参考，非标准）

断点应跟设计稿与内容走，不必死记数值；配合第 20 篇Flex/Grid做列数切换即可。

三、rem / vw / em 与选型

3.1 单位对照

3.2 rem 适配思路

思路 A：固定根字号 + rem

html{font-size:16px;/* 1rem = 16px */}.title{font-size:1.25rem;/* 20px */}

思路 B：按设计稿等比（常见 750 宽稿）

/* 设计稿 750px 宽：100vw 分成 7.5 份，1 份 ≈ 100px 设计稿 */html{font-size:calc(100vw / 7.5);}/* 设计稿上 32px → 0.32rem */.card{padding:0.32rem;}

大屏需max-width封顶，避免根字号无限变大：

html{font-size:calc(100vw / 7.5);}@media(min-width:750px){html{font-size:100px;/* 封顶，750 以上不再放大 */}}

工程里常用PostCSSpxtorem把写好的px转成rem，根字号由构建或上面脚本统一控制。

3.3100vw与横向滚动

100vw= 视口包含滚动条的宽度；若body已有滚动条，width: 100vw的元素可能比100%略宽，出现横向滚动条。

/* ❌ 易在部分浏览器出现 1～17px 横向溢出 */.full-bleed{width:100vw;}/* ✅ 优先用百分比或 max-width: 100% */.full-bleed{width:100%;max-width:100%;}

四、clamp 流式尺寸

clamp(最小, 首选, 最大)：在区间内随视口平滑变化，常用于标题字号、间距，减少写很多@media。

h1{font-size:clamp(1.25rem,4vw,2.5rem);}.section{padding:clamp(16px,5vw,48px);}

等价理解：取max(最小, min(首选, 最大))。小屏不小于 1.25rem，大屏不超过 2.5rem，中间随4vw变化。

五、safe-area 安全区域

刘海屏、底部 Home 指示条会占用可视区域。需viewport-fit=cover+env(safe-area-inset-*)：

<metaname="viewport"content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>

.fixed-bottom-bar{position:fixed;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}/* 同时兼容旧写法 constant（iOS 11.2 前） */@supports(padding:max(0px)){.fixed-bottom-bar{padding-bottom:max(12px,env(safe-area-inset-bottom));}}

env()读系统安全区内边距；固定底栏、全屏弹窗、沉浸式 Header 都要留足，避免按钮被横条挡住。

六、高清屏下的 1px 边框

CSS 里border: 1px是1 个 CSS 像素；DPR=2 的屏上 1 CSS 像素 = 2×2 物理像素，细线会显得偏粗。

6.1 常见方案

/* 伪元素 + scale — 面试常写 */.hairline-bottom{position:relative;}.hairline-bottom::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#e5e5e5;transform:scaleY(0.5);transform-origin:0 100%;}/* DPR=2 时 scaleY(0.5) → 视觉约 0.5 CSS px；DPR=3 可配合 JS 设 scale */

口述：物理 1px = 1/DPR 个 CSS 像素；要在 Retina 上看起来「发丝级」，需0.5px或transform 缩放。

七、高清图与 srcset

7.1 为什么需要 2x/3x 图

同样width: 100px的<img>，DPR=2 需要200px 宽的图片资源才清晰，否则被浏览器拉伸发糊。

7.2 srcset 与 sizes

<imgsrc="logo.png"srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"alt="Logo"/><!-- 响应式：按视口宽度选不同资源 --><imgsrc="banner-800.jpg"srcset="banner-400.jpg 400w, banner-800.jpg 800w, banner-1200.jpg 1200w"sizes="(max-width: 600px) 100vw, 800px"alt="Banner"/>

• Nw：图片固有宽度（像素）。
• sizes：告诉浏览器「这个 img **大概占多宽」，以便从 srcset 里选合适文件。

CSS 背景图可用媒体查询 +-webkit-min-device-pixel-ratio: 2换@2x资源；或直接用SVG / 足够大的位图。

八、补充：touch-action

历史上有300ms 点击延迟（等双击缩放）；现代浏览器在正确 viewport 下大多已优化。仍可在可点击区域加：

button, a{touch-action:manipulation;/* 禁用双击缩放延迟，保留滚动 */}

九、易混淆点归纳

1. 不设 viewport→ 移动端默认缩小整页，不是「自动适配」。
2. rem看根元素，em看当前元素；组件内相对字号用em，全站缩放用rem。
3. 100vw≠ 100%，前者可能含滚动条宽度导致横向溢出。
4. viewport-fit=cover必须配合safe-area-inset，否则内容进刘海区。
5. 1px 边框在 Retina 上是「粗线」问题，不是 CSS bug。
6. 移动优先用min-width增强；桌面优先才常用max-width覆盖。

十、思考与练习

1.width=device-width解决的是什么问题？

解析：让布局视口宽度等于设备逻辑宽度，页面按真实手机宽度排版，而非默认 ~980px 缩小版。

2.设计稿 750px 宽，某元素设计稿上宽 150px，用 rem（根字号100vw/7.5）怎么写？

解析：150 / 100 = 1.5rem（750 稿下 1rem 对应 100px 设计稿尺寸）。

3.为什么全屏横幅写width: 100vw有时出现横向滚动条？

解析：100vw 含滚动条宽度，可能比body内容区略宽；改用width: 100%或overflow-x: hidden（后者慎用，可能裁切内容）。

4.固定底部 Tab 在 iPhone 上被横条挡住，最少改哪两处？

解析：meta加viewport-fit=cover；底栏padding-bottom: env(safe-area-inset-bottom)。

5.DPR=2 时，100×100 CSS 像素的 img 至少需要多大源图才清晰？

解析：约200×200 物理像素（或 srcset 提供2x资源）。

总结

• viewport：width=device-width, initial-scale=1是移动端基线；沉浸式加viewport-fit=cover。
• 适配：移动优先+min-width媒体查询；尺寸用rem/vw/clamp按场景选。
• safe-area：固定底/顶栏用env(safe-area-inset-*)。
• 高清：1px用伪元素缩放或 0.5px；图片用srcset / 2x匹配 DPR。

CSS 与布局专题至此完结。下一篇进入BOM 核心对象：window、location、navigator、history等（系列第 22 篇）。