移动端适配的方法

Question

1. viewport 适配

通过设置 viewport 的宽度为设计稿尺寸，然后设置缩放比例为正式设备和设计稿宽度的比例实现适配

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

优点： 开发流程很简单，不需要额外计算。适配范围广。
缺点： 页面整体放大缩小，对于不想缩放的元素无法控制。比如边框在大屏手机下显得很粗，在小屏手机下显得很细

rem 适配

rem 的大小是 html 根元素的 fontsize 大小，可以动态设置 rem，实现屏幕适配。针对不想响应式的元素，仍然可以使用 px

const WIDTH = 750  
const setView = () => {
      document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
}
window.onorientationchange = setView
setView()

开发代码时直接 像素大小 除以 100， 就可以得到rem大小

vw 适配

直接使用和宽度的比例获取 vw 尺寸即可，例如 28px 可以得到 calc(100vw * 28 / 750)

项目开发时可以用 预处理器进行换算

@function px2vw($px) {
  @return $px * 100vw / 750;
}

.button {
  width: px2vw(120);
  font-size: px2vw(28);
  line-height: px2vw(48);
  border: 1px solid #000;
  text-align: center;
}