手机自适应的图片高度rem是怎么计算的

Question

手机网页布局是两个li一行占满宽度

li {
    width: 7.375rem;
    height: 4.5rem;
    float: left;
    margin-left: .4rem;
    position: relative;
}
li img{ width: 100%; height: 4.5rem; display: block; border-radius: .3rem; overflow: hidden; background-color: #fff;}

rem是根据html的font-size来自动变的。
请问这个li的初始宽高值怎么计算呢？

Answer 1

!function(a,b){var c=a.documentElement,d="orientationchange"in window?"orientationchange":"resize",e=function(){var a=c.clientWidth;a&&(c.style.fontSize=100*(a/750)+"px")};a.addEventListener&&(b.addEventListener(d,e,!1),a.addEventListener("DOMContentLoaded",e,!1))}(document,window);

设计稿是750，动态js计算就行了

Answer 2

window.REM=document.documentElement.clientWidth/7.5;
document.documentElement.style.fontSize = window.REM + 'px';

这里的7.5代表设计稿750px,然后根据设计稿内的元素宽高直接除以100设置rem即可
比如高量得高200px宽160px的div，就设置为

div{height:2rem;width:1.6rem}

此做法可自适应屏幕尺寸
注：字体不要使用rem，应根据media查询写3个不同px的字体进行适配

Answer 3

你rem是怎么算的？
拿我的计算方式说吧！我计算的方式，就是：(屏幕宽度/效果图宽度)*100+'px';
比如效果图是750，屏幕375,1rem=(375/750)*100+'px',就是1rem=50px
如果一张图片在效果图上宽为100px,高为50px;那个样式设置就是img{height:.5rem;width:1rem;}

但是我不明白就是，两个li占满一行，li宽度设置50%不就好了？

Answer 4

用淘宝的flexible框架吧……就简单很多了，按照设计稿换算就行了