一、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"