根据iPhone6设计稿动态计算rem值
2016-01-29 10:46
507 查看
rem单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题,我们需要动态的给文档的更节点添加
font-size值。使用
mediaquery可以解决这个问题,但是每一个文件都引用一大串的
font-size值很繁琐,而且值也不能达到连续的效果。
就使用js动态计算给文档的
fopnt-size动态赋值解决问题。
使用的时候,请将下面的代码放到页面的顶部(head标签内);
/** * [以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>
相关文章推荐
- MySQL数据类型 int(M) 表示什么意思?
- 分区算法测试
- QT create快捷键
- C#中将DataTable中数据导出到csv文件中
- bzoj 1009: [HNOI2008]GT考试
- java
- unity+slua热更流程演示
- Object-C--->Swift之(九)延迟存储属性
- C获取未知数组元素个数(win32)
- Android实战技巧之十九:android studio导出jar包(Module)并获得手机信息
- python3基础语法
- JQuery基本选择器
- 运行命令行带 PowerShell & VS & QT 环境(windows下加载QT命令行编译环境-VS版)
- Java线程1
- linux命令-cp
- win10 下运行 matlab7.0 出错的问题解决办法
- 在云上搭建大规模实时数据流处理系统
- java 中double的精度问题
- Android studio使用lambda表达式
- ------------------------------------------使用聚集索引和非聚集索引的区别------------------------------------