移动端布局rem布局适应各种手机

我的想法是，每个公司的设计稿的宽度是固定的，比如设计稿的宽度为375px，那么我先用js获取屏幕的宽度device-width，然后，设置1rem = device-width/37.5，那么1rem相当于设计稿的10px。

理想是美满的，但是，谷歌浏览器将少于12px的字体按照12px显示，也就是说，虽然你设置了1rem=10px，在谷歌内核的浏览器相当于1rem=12px。为了解决这个问题，只能再退一步，设置1rem=device-width/18.75，这样1rem等于设计稿的20px。例如一张图片在设计稿长宽分别为200px*100px，那么它的样式这样写

{
width:10rem;  //10*20=200
heigth:5rem;  //5*20=100
}

js代码示范：

var deWidth = window.screen.width;
console.log("deWidth:",deWidth);
var remPX = deWidth/18.75;
document.querySelector("html").setAttribute("style","font-size: "+remPX+"px;")
console.log("remPX:",remPX);

其他大神更完善的代码示范

<script type="text/javascript">
// 计算html的font-size
(function(){
function resizeBaseFontSize(){
var rootHtml = document.documentElement,
deviceWidth = rootHtml.clientWidth;
if(deviceWidth > 640){
deviceWidth = 640;
}
rootHtml.style.fontSize = deviceWidth / 7.5 + "px";
}
resizeBaseFontSize();
window.addEventListener("resize", resizeBaseFontSize, false);
window.addEventListener("orientationchange", resizeBaseFontSize, false);
})();
</script>