zoukankan      html  css  js  c++  java
  • 30行js rem弹性布局适配所有分辨率

    <script>
    /*
    # 按照宽高比例设定html字体, width=device-width initial-scale=1版
    # @pargam win 窗口window对象
    # @pargam option{
    designWidth: 设计稿宽度,必须
    designHeight: 设计稿高度,不传的话则比例按照宽度来计算,可选
    注意点: 安卓下 html的font-size设置小于12px的值不起作用
    注意点: 安卓下 html的font-size设置小于12px的值不起作用
    注意点: 安卓下 html的font-size设置小于12px的值不起作用
    designFontSize: 设计稿宽高下用于计算的字体大小,默认100,可选
    callback: 字体计算之后的回调函数,可选
    }
    # return Boolean;
    # ps:请尽量第一时间运行此js计算字体
    */
    !function (win, option) {
    var count = 0,
    designWidth = option.designWidth,
    designHeight = option.designHeight || 0,
    designFontSize = option.designFontSize || 20,
    callback = option.callback || null,
    root = document.documentElement,
    body = document.body,
    rootWidth, newSize, t, self;

    root.style.width = '100%';
    //返回root元素字体计算结果
    function _getNewFontSize() {
    //var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
    var scale = (window.innerWidth) / designWidth;
    return parseInt(scale * 10000 * designFontSize) / 10000;
    }

    !function () {
    rootWidth = root.getBoundingClientRect().width;
    self = self ? self : arguments.callee;
    //如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
    if (rootWidth !== win.innerWidth && count < 20) {
    win.setTimeout(function () {
    count++;
    self();
    }, 0);
    } else {
    newSize = _getNewFontSize();
    //如果css已经兼容当前分辨率就不管了
    if (newSize + 'px' !== getComputedStyle(root)['font-size']) {
    root.style.fontSize = newSize + "px";
    return callback && callback(newSize);
    }
    }
    }();
    //横竖屏切换的时候改变fontSize,根据需要选择使用
    win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
    clearTimeout(t);
    t = setTimeout(function () {
    self();
    }, 300);
    }, false);
    }(window, {
    designWidth: 750,
    // designHeight: 1136,
    designFontSize: 100, //安卓下不能设置小于12px的字体 所以这个值要尽量大些
    callback: function (argument) {
    //console.log("test")
    }
    });
    </script>

  • 相关阅读:
    路径查看linux 向内核注册总线例子
    属性应用Android Manifest之<provider>元素中文注释
    序数序列hdu 1394
    大分类分类Zen Cart大分类下直接显示产品列表插件
    虚拟化运行[OpenStack] VMWare产品介绍
    名称磁盘Linux系统监控的CPU、Mem、IO的OID
    端口服务器黑马韩前成linux从入门到精通proftpd服务器配置
    主库配置关于Dataguard Online redo log 和 Standby redo log
    尺寸品牌Jquery 仿淘宝京东多条件筛选 可自行结合ajax加载
    设置编辑(iPhone/iPad开发)设置UITextView为不可编辑状态
  • 原文地址:https://www.cnblogs.com/bhan/p/9078021.html
Copyright © 2011-2022 走看看