移动端自适应之——rem与font-size
需求:
在不同的移动终端设备中实现,UI设计稿的等比例适配。
方案:
布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。
假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem。设计稿中标注的任何px数值都可以换算成px/100的rem值。
就是说,每一个设备的宽度都定为7.5个rem,然后宽度非750px的设备里,就需要用JS对font-size做动态计算。
换算关系为:根节点的font-size=设备宽度/7.5。
即:document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';
注:需要考虑到dpr,即一倍屏两倍屏的问题。
http://mobile.51cto.com/web-484304.htm
备注:
每个浏览器对最小font-size的支持,不尽相同。js动态计算的font-size值太小时,会导致超小屏上UI显示效果比预想中的偏大。
比如,font-size计算是10px,但是chrome只支持到12px,他就按照12px去渲染了,这就会导致UI偏大了。(上面方案中的100px肯定是没有问题的)
具体表现:
浏览器 | 最小支持font-size |
PC chrome | 12px (可以通过安装Advanced Font Settings插件支持到6px) |
Android和iOS | 1px(只测试了主流浏览器,未做充分测试) |
cordova(Android和iOS) | 9px |
参考:http://www.cnblogs.com/lyzg/p/4877277.html
转载请注明出处:http://www.cnblogs.com/youryida 欢迎留言或qq交流(1140215489)