三端适配(Pc Ipad Moblie)

利用sass sass-loader lib-flexible（动态计算屏幕的基准值） 通过监视屏幕的宽度切换三套样式

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      model:''
    }
  },
  methods:{
    // 根据视口宽度调整显示模式
    changeModel(width){
      let _model=''
      switch(true){
        case width>=1000:
          _model='pc'
          break
        case 1000>width && width>=600:
          _model='middle'
          break
        case 600>width:
          _model='mobile'
          break
      }
      if(_model!==this.model){
            this.model=_model
            console.log(99999999999,_model);
            document.getElementsByTagName('html')[0].className=this.model
        }
    },
    windowResizeHandler(e){
      const width=e.currentTarget.innerWidth
      this.changeModel(width)
    }
  },
  mounted(){
    this.changeModel(window.innerWidth)
    window.onresize=this.windowResizeHandler
  }
}
</script>

<style>
#app {

}
</style>

移动端rem适配（H5）

lib-flexible（动态计算屏幕的基准值）和 postcss-pxtorem（全局转化rem）（基准值影响大小 切换不同设备时rem值不变 font-size自动转化 实现自适应）

配置文件：

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

文件位置截图：

电脑屏幕适配

// 根据不同屏幕 等比例缩放 宽高不变
        resize() {
            var s;
            // s = window.screen.width / 1920;
            // document.body.style.transformOrigin = '0 0';
            // document.body.style.transform = 'scale(' + s + ',' + s + ')';
            // document.body.style.width = window.innerWidth / s + 'px';
            // document.body.style.height = window.innerHeight / s + 'px';
            s = window.screen.width / 1920;
            document.body.style.zoom = s;
        }

分割屏幕的宽度，手动计算font-size的大小：

function Rem() {
        // 表示1920的设计图,使用100PX的默认值
        var whdef = 100 / 2350;
        // 当前窗口的宽度
        var bodyWidth = document.body.clientWidth;
        // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        var rem = bodyWidth * whdef;
        document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}
window.addEventListener('load', Rem);
window.addEventListener('resize', Rem)