Rem的使用
什么是rem?
rem是CSS3新增的相对长度单位,是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。
基于Vue框架使用rem
在项目目录下,创建一个js 文件,将下面代码复制进去
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
if(!clientWidth) {
return
};
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
recalc();
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
在main.js 中导入 该js文件,并全局使用即可
import rem from './js/rem'
Vue.use(rem)
之后就可以在style 中用上 rem 单位了。开心!
// 一个月薪2500的狗头,只能记录+分享它的狗生了…