遇到项目需求变更，需要自适应4:3主流屏幕，于是采用了rem，和动态js计算根元素。
1.rem
rem是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。
2.步骤
-
在
html的head中加上meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
代表宽度是设备宽度，同时不允许缩放。
-
设置根元素-相对于根元素
html
html {font-size: 100px;} //100px方便计算，实际值需要自己确定
-
计算不同屏幕时根元素
可以使用媒体监听，也可以使用动态js计算，本文因为不确定自适应数量使用动态计算
var deviceWidth
setHtmlFontSize()
if (window.addEventListener) {
window.addEventListener('resize', function () {
setHtmlFontSize()
}, false)
}
function setHtmlFontSize () {
// 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66
deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidth
document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important'
}
-
根据高保真还原
每个单位大小用实际值除以100得到相对的rem值。
然后就完美还原辣！
