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的狗头，只能记录+分享它的狗生了…