根据屏幕宽度设置font-size:
window.onresize = setFontSize;
setFontSize();
function setFontSize() {
var designWidth = 750;
var windowWidth = document.documentElement.clientWidth;
if (windowWidth > designWidth) {
windowWidth = designWidth;
}
document.documentElement.style.fontSize = 30 * (windowWidth / designWidth) + "px";
}
sass转化单位
$brower_default_font_size: 30px !default;
html{
font-size: $brower_default_font_size;
}
@function pxTorem($px){
@return $px / $brower_default_font_size * 1rem;
}
当屏幕宽度为750时,和设计稿宽度一致。此时font-size为30px,若某个元素在设计稿的宽度为30px,按照以前的做法,需要手动计算rem倍数,设置元素宽度为1rem,而使用sass之后,只需调用函数pxToRem(30px),可自动计算出rem。即为30/30*1rem=1rem。