移动前端自适应解决方案
- 常见需求：
在不同的移动终端设备中实现 UI设计稿的等比例适配。
- rem 指字体相对于根元素htmlL的大小单位。
假设设计稿是宽750px来做的，假定 根节点的font-size为100px，得出设备宽为7.5rem。设计稿中标注的px数值都可以换算成px/100的rem值。
设备宽度非750px的设备里，就需要用JS对font-size做动态计算。
- 该设备中 rem 大小换算关系为：X rem/7.5rem=设备宽度/750px
- 该设备 根节点的font-size=设备宽度/7.5，即：
document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';
// 该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。
<body style = Ï"width: 7.5rem;">
7.5rem = 750px
</body>
当前设备的宽度：通过媒体查询来获取，eg：
@media sceen and (min-width:320px){
html{
font-size:50px;
}
}
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
