在用vue写移动端的项目时会用到rem适配,而将px计算转换rem比较麻烦也不好修改,并且许多UI插件使用的单位仍然是px,这时我们可以使用 postcss-pxtorem 工具帮助我们自动转换。
以 vue-cli2.0 创建的项目为例:
1.在 src/assets/js/ 文件夹下创建 rem.js 文件,自定义 html 的 font-size 大小,例:
/* 移动端适配 */
;(function(doc, win, width){
var docEl = doc.documentElement;
var head = doc.getElementsByTagName("head")[0];
var hFirst = head.firstChild || head.firstElementChild;
var cssEl = doc.createElement('style');
//手机横屏,竖屏可在此处设置
var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
var recalc = function() {
var x;
var n = win.devicePixelRatio;
if (n >= 3) {
x = 3;
} else if (n >= 2){
x = 2;
} else {
x = 1;
}
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var pxPerRem = 100*(clientWidth / width);
cssEl.innerHTML = 'html{ font-size:' + pxPerRem + 'px!important; }';
docEl.setAttribute("data-dpr", x); //x 限制范围取值 1,2,3
head.appendChild(cssEl);
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,750)
// 若初始化为 375px, 此时整个屏幕宽度为 3.75rem
// 若初始化为 750px, 此时整个屏幕宽度为 7.5rem
// 若初始化为 640px,(document, window,640), 此时整个屏幕宽度为 6.4rem
// 本例以 750 的设计稿为例, 最终结果 1rem = 100px
2.在 main.js 中引入 rem.js
import Vue from 'vue'
import App from './App'
//......
//rem 适配 1rem = 100px
import '@/assets/js/rem'
3.安装工具插件 postcss-pxtorem
npm install postcss-pxtorem --save-dev
4.修改项目中的 .postcssrc.js 文件(注:与index.html,package.json 等同级的文件),可以在此配置的基础上根据项目需求进行修改。
module.exports = {
plugins: {
//...... 其他的配置项
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 100, //本例配置的适配 1rem=100px
propList: ['*']
}
}
}
使用说明
本例设计稿为宽度 750px ,上面设置的适配为 1rem=100px。
若不想转 rem 保留 px 单位可如下操作:
1.写在行内样式中的px不会被转化,例<div style="width: 120px">
中的120px 不会被转化。
2.单位含有大写字母时不会被转化,例如:20Px,20PX
。
/* 按照设计稿中的实际尺寸写,无需做任何改变 */
.box{
width: 255px;
border: 1px solid red;
}
/* 如果想保留px,则将px写成 PX 或 Px */
.top{
width: 255PX;
height: 50Px;
border: 1PX solid red;
}
最终解析为:
.box{
width: 2.55rem;
border: 0.01rem solid red;
}
.top{
width: 255px;
height: 50px;
border: 1px solid red;
}