移动端适配方案一些概念屏幕尺寸：用对角来计算。1英寸=2.54厘米像素：硬件和软件所能控制的最小单位。屏幕分辨率：

一些概念

屏幕尺寸：用对角来计算。1英寸=2.54厘米
像素：硬件和软件所能控制的最小单位。
屏幕分辨率：一个屏幕具体由多少个像素点组成
物理像素：设备的像素点个数
逻辑像素：让n个像素当一个像素使用
视觉视口
理想视口：所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。 width=device-width 宽度等于屏幕宽度 initial-scale=1缩放等于1 maximum-scale=2最大缩放等于2 minimum-scale=0.5最小缩放等于0.5 user-scalable=no不允许缩放

<meta name="viewport" content="width=device-width,initial-scale=1" />

移动端适配方案

rem

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable="no"/>
  <style>
    .box{
      width:10rem;
    }
  </style>
  <script>
    function setRootRem(){
      const root = document.documentElement;
      const scale = root.clientWidth / 10;
      root.style.fontSize = scale + 'px'
    }
    setRootRem()
    window.addEventListener('resize', setRootRem)
  </script>
</head>

但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的rem值，比如上面的font-size设计稿上是20px，那我们就要计算一下20px对应的rem是多少，按我们上面的规则，1px = 1/37.5rem，所以20px应该对应20/37.5 = 0.53rem。所以这种方案我们通常搭配着CSS预处理器使用。 rem.less

@device-width:375;
@rem:(@device-width/10rem)

然后将@rem配置成less全局变量

font-size:(24/@rem)

特点

适配原理稍复杂
需要使用JS
设计稿标注的px换算到rem
方案灵活，既能实现整体缩放，又能实现局部不缩放

vw、vh适配

rem.less

@device-width:375;
@vw:(100vm/@device-width)

font-size: 16*@vw

特点

适配原理简单
不需要JS即可适配
设计稿标注的px换算到vw
方案灵活，既然实现整体缩放，又能实现局部不缩放

px

export function initViewport() {
    const width = 375;  // 设计稿宽度
    const scale = window.innerWidth / width
    // console.log('scale', scale)
    let meta = document.querySelector('meta[name=viewport]')
    let content = `width=${width}, init-scale=${scale}, user-scalable=no`
    if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
    }
    meta.setAttribute('content', content)
}

适配原理简单
需要JS
无需转换
方案死板，只能实现页面级别肢体缩放

参考

超详细讲解H5移动端适配