所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示
原则
- 开发时方便，写代码时设置的值要和标注的 160px 相关
- 方案要适配大多数手机屏幕，并且无 BUG
- 用户体验要好，页面看着没有不适感
思路
- 写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
- 按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px
- 固定尺寸+弹性布局，不需要缩放
viewport 适配
<meta name="viewport" content="width=750,initial-scale=0.5">initial-scale = 屏幕的宽度 / 设计稿的宽度。一般设计稿的尺寸是实际开发尺寸的2倍。开发的时候根据设计稿/2即可。
<head><script>const WIDTH = 750const mobileAdapter = () => {let scale = screen.width / WIDTHlet content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}
)
