rem布局、rem+vw结合布局

rem布局

var deviceWidth = document.documentElement.clientWidth;
//设计稿750px   1rem = 100px     设计稿宽度（750px）/100px(预设字体基础值自定义方便计算) = deviceWidth（可变）/font-size（fs）
if(deviceWidth > 750) {
    deviceWidth = 750;
}
var fs = deviceWidth/7.5;
document.documentElement.style.fontSize=fs+'px';
//把计算出的fontSize作为网页根标签（html标签）的字体值（font-size）

然后就可以根据750px设计稿 中1rem = 100px的比值进行设置
.box{
width:1rem;/*  1rem=根标签字体大小*1    */


/*在750px宽的屏幕中盒子宽度为100px 随着屏幕宽度的改变盒子宽度也会按照比例改变*/
}

rem+vw结合布局

v：viewport 视口 w:width h:height
而视口单位中的“视口”，在电脑端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 布局视口。
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
这里假设设计稿的宽度是750px 根据比值可以把设计稿中的100px转换为13.33333333vw，此时设置的box大小就可以根据不同的屏幕宽度调整自身的大小

 /*

  750px设计稿   100vw  
    7.5px  1vw
    1px    0.13333vw
  100px  13.333vw
        
        */

        /* 
        rem
        750px  设计稿

        100px   1rem

        */
html{

    font-size: 13.33333333333vw;
}


.box{
    width: 1rem;
    height: 1rem;
    background-color: skyblue;
}