移动端rem布局

之前用rem布局方式做了一些小的页面。稍微解释一下rem字体，有两件事要理解
　　1.默认浏览器IE9+以及高级浏览器默认字号16px
　　2.rem元素值根据html设置大小，而em根据父元素。
怎么用：
两种方法 简单直接的方法
为什么是62.5%，因为默认字号16*0.625 =10px容易转换成rem
html{font-size:62.5%;}
这样以后所有计算都可以用rem
比如 100乘以100的div就直接变成了
width:10rem;height:10rem
第二种方法，js方法，推荐。

1
2
3
4
document.addEventListener('DOMContentLoaded', function(e) {
                document.getElementsByTagName('html')[0].style.fontSize =document.clientWidth / 10 + 'px';
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
}, false);

问题来了:
写css咋切图 还是用px去写,然后用less或者sass转。
用法：

1
2
3
4
@function px2rem($px){
   $rem : 37.5px;
   @return ($px/$rem) + rem;
}

　　为什么375? 因为苹果6是375，设计工作中是先出一个基准完美展示版本设计 再去调整比例。注意一件事：如果你用rem就全用rem，margin和padding这些用rem也是一点问题没有的。推荐使用rem布局，这也是国内很多公司愿意采用的方式。