zoukankan      html  css  js  c++  java
  • 根据iPhone6设计稿动态计算rem值

    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>
  • 相关阅读:
    SQL EXPLAIN优化详解
    2019数据智能算法大赛赛后复盘
    K-D树详解
    点云配准相关
    pandas速查手册(中文版)
    Windows CMD命令大全
    获取时间戳
    SQL 字符串转成临时表
    delphi cxgrid明细新增第三行的报错【Key violation】
    cxgrid列的Properties(cxPopupEditPopup)的关闭方法
  • 原文地址:https://www.cnblogs.com/ysx215/p/8316195.html
Copyright © 2011-2022 走看看