两种移动端rem布局实现方法

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
 html,body {
 font-size:50px;
 }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
 html,body {
 font-size:40px;
 }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
 html,body {
 font-size:30px;
 }
}
.box{
 border: 1rem solid #000;
 font-size: 1rem;
}

// 需求：根据设计图的比例去动态设置不同屏幕下面对应的font-size值
// 这段JS不要添加入口函数，并且引用的时候放到最前面
// ui的大小根据自己的需求去改
// 设计图的宽度
var ui = 750;
// 自己设定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的时候调用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的时候动态设置fontsize值
function getSize(){
 screenWidth = oHtml.offsetWidth;
 // 限制区间
 if(screenWidth <= 320){
 screenWidth = 320;
 }else if(screenWidth >= ui){
 screenWidth = ui;
 }
 oHtml.style.fontSize = screenWidth/ratio + 'px';
}