rem布局
rem布局簡(jiǎn)單來(lái)說(shuō)就是根據(jù)頁(yè)面的font-size的大小來(lái)設(shè)置頁(yè)面元素的屬性;
1.計(jì)算公式: 元素的寬度(或高度) / html元素(跟標(biāo)簽)的font-size = rem;
2.舉例 元素的寬度是 200px, html的font-size是100px, 那么元素寬度的rem大小 = 200/100 = 2rem
js代碼：
function resetWidth() {
// 兼容ie瀏覽器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 默認(rèn)的設(shè)置是375px(ip6)的根元素設(shè)為100px, 其他的手機(jī)都相對(duì)這個(gè)進(jìn)行調(diào)整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
加上下面代碼防止影響默認(rèn)字體大小
document.body.style.fontSize = '15px';
使用flexible布局
github地址：https://github.com/amfe/lib-flexible
官方文檔地址：https://github.com/amfe/article/issues/17
本文中有部分內(nèi)容引至上面這個(gè)文檔。
cdn地址
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>
如果你用的是其他編輯器或者IDE，就可以用CSS的處理器來(lái)處理，比如說(shuō)Sass、LESS以及PostCSS這樣的處理器。
@function px2rem($px) {
@return $px / 75 * 1rem;
}
字體不使用rem的方法
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
