vue_react脚手架rem适配配置

一、vue脚手架移动端rem适配

用此种方法可以不用在样式中用@font:375/10rem

1.初始化vue脚手架

vue create mobile

2.安装依赖：

npm i postcss-loader postcss-px2rem --save

3.根目录下建立：vue.config.js，内容如下：

var px2rem = require('postcss-px2rem');

module.exports = {
	css:{
		loaderOptions:{
			postcss:{
			plugins:[px2rem({remUnit:37.5})]//已设计稿为标准计算出来的根字体大小,比如设计稿是375,37.5=375/10
			}
		}
	}
}

4.src下新建utils(工具)，在utils内新建rem.js，内容如下(给不同设备设置根字体大小)：

function adapter(){
			//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
			const dpWidth = document.documentElement.clientWidth
			//计算根字体大小
			const rootFonstSize = dpWidth / 10
			//设置根字体大小
			document.documentElement.style.fontSize = rootFonstSize + 'px'
		}
		adapter()
		window.onresize = adapter

然后在main.js内引入rem.js

import "./utils/rem"