移动端适配实践

关于移动端适配，网上有很多文章，什么viewport，理想视口，dpi之类的。。
设计稿750
我的办法是

<meta content="width=750, initial-scale=.5" name="viewport">

然后页面

.page{
	width：750px
}

最后加上一段脚本动态设置scale

<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>

我是把移动端和pc写在一起
所以样式写在媒体查询里

@media screen and (width: 750px) {
       
  }

因为我拿到的ui是375，所以我可以像下面这么干

@media screen and (width: 750px) {
        html {
          font-size: 125%;
        }
         .page {
          width: 750px
        }
        .unsubscribe-reason__form {
        //此处对应设计稿的319px
          width: 31.9rem; 
        }
  }

其他的还有方法诸如：

• 用rem做单位，然后脚本动态修改html的font-size
• 用vw做单位，使用插件换算px=>vw
  欢迎讨论