移动端常见适配方案

一丶利用CSS中 媒体查询+rem

rem是一个相对单位，1rem等于html的font-size大小
而我们可以通过媒体查询可视区域screen的大小变化，然后修改对应html的font-size大小

例如：

@media screen and (min-width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media screen and (min-width:414px) {
    html {
        font-size: 41.4px;
    }
}
 
 //1rem = font-size的值
.box {
    width: 5rem;
    height: 5rem;
    background-color: pink;
}

优点：屏幕尺寸发生变化时，界面自动变化，不用手动刷新
缺点：屏幕尺寸大小不一，不可能任何尺寸的屏幕都进行一遍适配

二丶配置flexible.js动态计算

<script src="./js/flexible.js"></script>

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配

flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小
例如： 当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px

这里我已经把flexible的源码赋值过来了，大家可以用到自己的flexible.js中

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

或者npm install amfe-flexible --save

px->rem工具
vscode中下载扩展：

然后对其进行配置，开发中按照你设计时用屏幕对其设置，例如你用的是375px，则将值设置为37.5

或者npm install postcss-pxtorem --save
postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位
配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：

为了方便 我是在 vue.config.js 配置的代码配置如下：

module.exports = {

    //...其他配置

    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require('postcss-pxtorem')({

                        rootValue: 37.5,

                        propList: ['*']

                    })

                ]

            }

        }

    },

}

注意点：
1、rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；
2、propList是设置需要转换的属性，这边*为所有都进行转换