viewport缩放方案

在对设计稿还原时，不需要去关注移动设备的屏幕尺寸，页面开发好后，在HTML的head标签里加入 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >
本质上就是设置好布局视口宽度后再缩放页面，使其恰好能够撑满屏幕

<head>
  <meta charset="utf-8">
  <script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      } 
      meta.setAttribute('content', content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter
  </script>
</head>

优点是在开发过程中不需要去做额外的计算

动态rem

viewport是页面级（整体）缩放方案，动态rem是既可以保留一部分元素的尺寸，又可以根据屏幕缩放页面大小

对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位

如何做呢？
使用js设置html的font-size和页面宽度相同，而rem依赖于html的font-size，间接的让rem依赖于页面宽度

image.png

注意：字体还是使用字号，但是宽高使用动态rem（rem可以与其他单位同时存在）

image.png

在scss中rem2px

image.png

vw方案

一种不需要JavaScript的适配方案——vw适配方案

vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位

比如一个标题的font-size是32px，设计图页面尺寸为750px
(32/750)*100% = 4.27%，也就是说这个标题字号占屏幕宽度的4.27%，即可以写font-size: 4.27vw

scss中px2vw

@function px2vw($px) {
  @return $px * 100vw / 750; // 设计图页面尺寸为750px
}
.button {
  width: px2vw(120); // 设计图尺寸按钮宽度120px
  font-size: px2vw(28);
  line-height: px2vw(48);
  border: 1px solid #000;
  text-align: center;
}