REM這個單位榔至，會根據html的font-size大小進行轉換抵赢。
html{font-size:100px;}
p{padding-top:.5rem;}
轉換后p的padding-top就是50px了。只要我們進行適當的計算唧取，當前屏幕的寬度铅鲤，html的font-size是多少px就OK了。
計算rem基準的js
//定義basesize來實現(xiàn)rem
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth,
remBaseize = 40 * (clientWidth / 750),
remBaseize = remBaseize > 60 ? 60 : remBaseize;
if (!clientWidth) return;
docEl.style.fontSize = remBaseize + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
sass自定義計算rem
@function rem($px) {
$remSize :$px/40;
@return #{$remSize}rem;
}
.main-page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: rem(500);
background-color: yellow;
.test {
width: rem(150);
height: rem(120);
background-color: blue;
}
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
