在开发移动端的时候，当我们拿到设计稿要进行开发的时候，这时候就要考虑一个问题了。由于手机型号不同，屏幕的尺寸也不一样，如果我们规规矩矩的按照设计稿给的尺寸设计页面，那样针对各种不同尺寸大小的手机，展示出来的效果就不一样了。这时候就要想到要做尺寸适配。让我们设置的尺寸对于不同的手机可以动态改变像素。
如下为苹果手机，i5和i6下两个屏幕大小：
首先，看到移动wap端适配，我们第一时间就能想到使用单位rem。px是不可以自动适配的；百分比只能让宽自动适配。而rem单位是相对于HTML标签的字号计算结果；如果html标签的font-size是100px，那么1rem就是100。
然后，我们根标签写上100px,如果设计稿给定屏幕宽为375，那么在我们的代码里，屏幕宽就应该是375/100=3.75rem;
到这里，rem虽然可以做到大小适配，但是只针对于设计稿宽375px和屏幕是375px的手机。如果是320px的手机呢？
这时候，我们可以改变跟标签的像素大小。如下图：
我们可以拿到手机的屏幕宽度，通过计算，得到更标签像素应该设置多少。换算思路为：375/100=3.75；那么320/？=3.75呢？
js代码为：
<script type="text/javascript">
// 适配 控制根像素
function getFontSize() {
const widths = document.documentElement.clientWidth;
const rootFont = (widths*100)/375; // 375设计稿宽
document.documentElement.style.fontSize = rootFont+'px';
}
getFontSize();
window.onresize = getFontSize;
</script>
页面使用为：（结合less,使用计算，轻松拿捏）
img{
width: 24/100rem;
height: 26/100rem;
}
如此：我们就可以根据设计稿，动态适配大小！
