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

    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>
  • 相关阅读:
    项目准备和启动——项目投标
    项目准备和启动——项目可行性分析
    项目准备和启动——项目建议书
    软件项目管理
    项目管理知识体系
    项目的生命周期
    项目管理基本方法
    什么是项目管理?
    Python基础学习——第一弹
    redis
  • 原文地址:https://www.cnblogs.com/jhcelue/p/7207106.html
Copyright © 2011-2022 走看看