简单粗暴的使用rem做单位开发移动端

rem开发移动端再适合不过,省时省心省力

1
2
3
4
5
6
7
8
9
10
11
12
(function(doc,win){ 
var docEl=doc.documentElement,//html
resizeEvt='orientationchange' in window?'orientationchange':'resize',
recalc=function(){
var clientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=20/375*clientWidth+"px";
};
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
1
2
3
4
5
6
@charset "UTF-8";
$rem:20;
$color:#fa0;
@function r($px){
@return $px/$rem+rem;
}