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>

  • 相关阅读:
    Centos7使用systemd 管理elasticsearch,创建elasticsearch服务
    nginx日志切割的2种方法
    sudo linux
    redis 重启不了
    类与对象
    用Python写一个小的购物车
    包的使用
    Python模块简介
    zookeeper & Dubbo
    迭代器 & 生成器
  • 原文地址:https://www.cnblogs.com/bhan/p/9078021.html
Copyright © 2011-2022 走看看