vue2.0适配

字体适配： 

安装 

cnpm install postcss-pxtorem --save-dev

配置 

// vue.config.js
// 然后在reset.css里面设置基础字体大小，如果不想让字体改变可以使用PX
const pxtorem = require('postcss-pxtorem')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        additionalData: '@import "@/assets/scss/base.scss";'
      },
      postcss: {
        postcssOptions: {
          plugins: [
            pxtorem({
              rootValue: 100, // 我这里是设置的是px是rem的一半，直接可以量多少写多少
              propList: ['*'] // 对所有 CSS 属性生效
            }) // 使用 px2rem 插件
          ]
        }
      }
    }
  }
})

屏幕适配：

// utils/rem.js

/* 字体大小 */
const baseSize = 100 / 2
/* 屏幕大小 */
const baseWidth = 375
const setHtmlFontSize = () => {
  const windowWidth = window.innerWidth
  document.querySelector('html').style.fontSize = windowWidth / baseWidth * baseSize + 'px'
}
setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize, false)

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/utils/rem'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')