H5适配手机端的依赖postcss-px2rem-exclude，可解决导致第三方组件样式变小的问题

问题：引入postcss-px2rem依赖后，第三方组件库的样式变的很小

原因：依赖会把组件中px自动转换为rem，而实际组件自身已经做过适配，画蛇添足了

解决：把postcss-px2rem依赖卸掉，安装依赖postcss-px2rem-exclude，根目录下创建postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 100,//将100px转化为1rem 由于设置了pc端的html默认为 100px=1rem
      exclude: /node_modules|folder_name/i
    }
  }
};

根目录store中的index.ts

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

});

根目录store中的other.ts

import {
	VuexModule,
	Mutation,
	Action,
	getModule,
	Module
} from "vuex-module-decorators";
import store from "./index"




@Module({ name: 'other', dynamic: true, namespaced: true, stateFactory: true, store })
export default class Other extends VuexModule {
	isMobile: boolean = false

	@Mutation
	private set_isMobile(boo: boolean){
		this.isMobile = boo
	}


	@Action
	public checkMobile(){
		// console.log(navigator.userAgent)
		let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
		this.set_isMobile(flag?true:false)
	}


	public get is_mobile() {
		return this.isMobile
	}
}


export const OtherModule = getModule(Other);

pc和手机端浏览器同时适配,根目录下util文件夹的rem.js

import { OtherModule } from '@/store/other.ts' //引入判断当前是手机端还是pc端
(function() {
    window.onresize = function() { //监听页面尺寸变化
      OtherModule.checkMobile() //当页面尺寸发生变化，改变vuex当中states储存的is_mobile数据
      if(OtherModule.is_mobile){ //如果是手机端 改变html标签的font-size，其中除去的3.6是手机端设计图百分百宽度 320 360 375等除100 而得出的结果
        document.documentElement.style.fontSize =
        document.documentElement.clientWidth/3.6 + "px";
      }else{
      //如果是pc端 1rem = 100px  因为pc端设计图的单位大多是px
        document.documentElement.style.fontSize = '100px'
      }
    };
  })();

在main.ts中引入

import '@/util/rem.js'
import { OtherModule } from '@/store/other'; //同时当页面首次加载时需要进行操作
OtherModule.checkMobile()	//确定vuex中is_mobile的值
if(OtherModule.is_mobile){ //并且改变当前html的font-size  如果是手机端 改变html标签的font-size，其中除去的3.6是手机端设计图百分百宽度 320 360 375等除100 而得出的结果
	document.documentElement.style.fontSize =
	document.documentElement.clientWidth/3.6 + "px";
}else{
	document.documentElement.style.fontSize = '100px'
}

//此方式可以设置公共样式例如 .fs16{font-size:0.16rem}