码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-01-19 14:15:52      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:计算   根据   效果   客户端   bsp   iphone   事件   span   nts   

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

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

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

 1 /**
 2  * [以iPhone6的设计稿为例js动态设置文档 rem 值]
 3  * @param  {[type]} currClientWidth [当前客户端的宽度]
 4  * @param  {[type]} fontValue [计算后的 fontvalue值]
 5  * @return {[type]}     [description]
 6  */
 7 <script>
 8     var currClientWidth, fontValue,originWidth;
 9     //originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿)
10     originWidth=375;
11     __resize();
12 
13     //注册 resize事件
14     window.addEventListener(resize, __resize, false);
15 
16     function __resize() {
17         currClientWidth = document.documentElement.clientWidth;
18         //这里是设置屏幕的最大和最小值时候给一个默认值
19         if (currClientWidth > 640) currClientWidth = 640;
20         if (currClientWidth < 320) currClientWidth = 320;
21         //
22         fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
23         document.documentElement.style.fontSize = fontValue + %;
24     }
25     </script>

 

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

标签:计算   根据   效果   客户端   bsp   iphone   事件   span   nts   

原文地址:https://www.cnblogs.com/ysx215/p/8316195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!