var whtml =html.getBoundingClientRect().width; //
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。html.style.fontSize = whtml /7.5 + "px";
这个7.5是根据设计图来的，如果设计的是750（iphone6的两倍），这里就是7.5.如果设计图是640（iphone5的两倍）的，这里就除以6.4.不论是那个最后字体都要*2/100=单位是rem的字体
12px就是12*2/100=0.24rem ， 20px就是20*2/100=0.4rem
如果页面是/7.5的他的宽度100%的时候其实是7.5rem。你把所有内容单位是rem的宽度加起来是7.5rem
所以如果你想一行两个内容，并且左右有距离，就需要计算好内容和间隔的大小了
我们来看效果图，这是在商城上经常可以看到的。
他的两个内容左右和中间距离都是一样的。我们设想左右都是0.2rem。元素只需要设置右边距margin-right:0.2rem;中间的元素是3.45rem；
结果总的宽度就是。02*3+3.45*2=7.5 就是我们想要的效果。但是怎么实现左右都是0.2呢。用margin似乎有点问题。我们可以在最外层给整体加一个margin-left:0.2rem
然后给这个元素margin-right:0.2rem就可以拉。
还有个需要注意的问题就是图片如果是不同大小的我们需要给他设置宽高。但是也不能拉伸，应该是小的高度不够的图片居中其他空白填充。
代码奉上
<div class="shop_list">
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九阳 新款家用破壁无渣豆浆...</p>
<div class="list_classes_integral"><span>23000</span> 积分</div>
</div>
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九阳 新款家用破壁无渣豆浆...</p>
<div class="list_classes_integral"><span>23000</span> 积分</div>
</div>
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九阳 新款家用破壁无渣豆浆...</p>
<div class="list_classes_integral"><span>23000</span> 积分</div>
</div>
<div class="list_classes">
<img src="img/11650.png" alt="">
<p>九阳 新款家用破壁无渣豆浆...</p>
<div class="list_classes_integral"><span>23000</span> 积分</div>
</div>
</div>
.main .shop_list{overflow: hidden;margin-left:0.2rem;}
.main .shop_list .list_classes{width:3.45rem;float:left;margin-right:0.2rem;margin-top:0.2rem;}
.main .shop_list .list_classes p{font-size:0.24rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main .shop_list .list_classes .list_classes_integral{font-size:0.24rem;color:red;line-height:0.55rem;}