1 移动端适配

⚡ 30 秒速记

• 前提：<meta name="viewport" content="width=device-width, initial-scale=1">，没它后面全白搭
• 两条主线：rem + 动态根字号（lib-flexible + postcss-pxtorem）/ vw 直接换算（postcss-px-to-viewport，纯 CSS）
• 新项目我偏向 vw，lib-flexible 作者自己也推荐转 vw；rem 的好处是能靠一行 JS 封顶
• 一定要封顶：外层 max-width 或 clamp()，不然平板和折叠屏上字大得离谱
• 细节：100dvh 解决地址栏导致的 100vh 溢出，env(safe-area-inset-bottom) 处理底部横条，DPR 只影响清晰度不影响布局

移动端适配说白了就是让一份设计稿在 320 到 430 宽的各种手机上都按比例显示。 前提是写对 viewport，让 CSS 像素等于设备宽度。之后两条路：rem 方案用 JS 把根字号设成屏宽的十分之一，postcss-pxtorem 自动把设计稿的 px 转成 rem；vw 方案更直接，1vw 就是屏宽的 1%，不用 JS。不管哪种都要封顶，我一般外层 max-width: 750px 居中，平板上就不会无限放大。另外别把 DPR 和布局混在一起，它只决定图要用几倍图。

为什么要做适配

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

适配方案

• 固定高度，宽度百分比适配-布局非常均匀，适合百分比布局
• 固定宽度，改变缩放比例适配-什么情况都可以
• 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">