根据iPhone6设计稿动态计算rem值

rem 单位在作移动端的h5开发的时候是最常用的单位。为解决自适应的问题,咱们须要动态的给文档的更节点添加font-size 值。使用mediaquery 能够解决这个问题,可是每个文件都引用一大串的font-size 值很繁琐,并且值也不能达到连续的效果。spa

就使用js动态计算给文档的fopnt-size 动态赋值解决问题。设计

使用的时候,请将下面的代码放到页面的顶部(head标签内);code

/**
 * [以iPhone6的设计稿为例js动态设置文档 rem 值]  * @param {[type]} currClientWidth [当前客户端的宽度]  * @param {[type]} fontValue [计算后的 fontvalue值]  * @return {[type]} [description]  */ <script> var currClientWidth, fontValue,originWidth; //originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿) originWidth=375; __resize(); //注册 resize事件 window.addEventListener('resize', __resize, false); function __resize() { currClientWidth = document.documentElement.clientWidth; //这里是设置屏幕的最大和最小值时候给一个默认值 if (currClientWidth > 640) currClientWidth = 640; if (currClientWidth < 320) currClientWidth = 320; // fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2); document.documentElement.style.fontSize = fontValue + '%'; } </script>
相关文章
相关标签/搜索