移动端rem使用

随着技术的不断更新换代，移动端无疑是一大趋势，HTML5和CSS3的出现使响应式布局成为流行，那么这里要说的是一个单位的使用——rem，可能大家都不陌生，那我就说一说一些我的使用。

在移动端页面中，rem是很常用的一个单位，它会以根元素的font-size的值为标准，做出符合页面大小的改变。如果根元素不写font-size，也就是让它是默认的字体大小16px，这时候如果body里有一个元素，规定宽高都是1rem，此时此刻它在浏览器的显示中就是16px * 16px，如果都规定2rem，此时此刻它在浏览器的显示中就是32px * 32px，这个很好理解。下面我们用一段js让它来自适应大小。

$(window).resize(function(event){
    size();
})
size();
function size(){
    if($(window).width >= 540){
        $("html").css("font-size", 540 / 10);
    }else{
        $("html").css("font-size", $(window).width() / 10);
    }
}

那么这么写之后，就把整个窗口分成了10等份，它会随着窗口宽度的改变而改变根元素的font-size大小，由此来达到我们想要的效果。此时此刻如果我们在iphone 6下看它的根元素字体大小就是37.5px，如果这时规定一个p标签为1rem，那么这个p标签就是37.5px；如果我们在iphone 6 Plus下看它的根元素字体大小就是41.4px，如果这时规定一个p标签为0.5rem，那么这个p标签就是20.7px。