1 移动端适配

⚡ 30 秒速记

• 前提是 <meta name="viewport" content="width=device-width, initial-scale=1">，没有它一切适配都不成立
• 两套主流方案：rem + 动态根字号（配 postcss-pxtorem 自动转换）、vw 直接换算（纯 CSS 无需 JS）
• 都要限制上下限，否则在平板和折叠屏上元素会被撑到荒唐尺寸 —— 用 clamp() 或容器 max-width
• 字号建议保留可缩放能力：别把根字号写死成 px，那会覆盖用户在浏览器里设置的字号偏好（无障碍问题）
• 现代补充：100dvh 解决地址栏导致的 100vh 溢出、env(safe-area-inset-*) 处理刘海屏和底部横条

移动端适配的核心，是让页面在不同屏幕宽度和像素比下保持合理的布局比例。 页面要先设置 viewport，再根据业务选择百分比布局或动态 rem：前者适合结构均匀的页面，后者更方便按设计稿等比缩放。使用 rem 时，需要根据屏幕宽度计算根字号，并限制最大适配宽度，避免平板上被无限放大。设备像素相关问题还要结合 window.devicePixelRatio，区分物理像素和 CSS 像素。

为什么要做适配

• 为了适应各种移动端设备，完美呈现应有的布局效果
• 各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放

适配方案

• 固定高度，宽度百分比适配-布局非常均匀，适合百分比布局
• 固定宽度，改变缩放比例适配-什么情况都可以
• Rem适配
• 像素比适配

单位

• em根据元素自身的字体大小计算,元素自身 16px 1em=16px
• Rem R -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸

百分比适配

固定高度，宽度百分比适配

• 根据设置的大小去设置高度，单位可以用px 百分比 auto
• 常用Flex布局
• 百分比宽度

以640设计稿为例，在外层容器上设置最大以及最小的宽

#wrapper {
    max-width: 640px; /*设置设计稿的宽度*/
    min-width: 300px;
    margin: 0 auto;
}

后面的区块布局都用百分比，具体元素大小用px计算

Rem适配(常用)

• 根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能
• 保证html最终算出来的字体大小，不能小于12px
• 在不同的移动端显示不同的元素比例效果
• 如果html的font-size:20px的时候，那么此时的1rem = 20px
• 把设计图的宽度分成多少分之一，根据实际情况
• rem做盒子的宽度，viewport缩放

head加入常见的meta属性

<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--这个是关键-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0">