zoukankan      html  css  js  c++  java
  • 使用rem缩放网页的javascript代码

    <script type="text/javascript">
    (function(doc, win) {
    var docEl = doc.documentElement,
    isIOS = navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
    dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEl.dataset.dpr = dpr;
    var recalc = function() {
    var width = docEl.clientWidth;
    var designWidth=320;
    if (width / dpr > designWidth) {
    width = designWidth * dpr;
    }
    docEl.dataset.width = width
    docEl.dataset.percent = 100 * (width / designWidth);
    docEl.style.fontSize = 100 * (width / designWidth) + 'px';
    };
    recalc()
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
    </script>

    请修改设计图的宽度designWidth。这段代码的好处是根元素font-size是100 计算方便,若要给页面设置宽度 1080 = 10.8rem 640 = 6.4rem 等,字号的话直接根据设计图除以100即可

      

    ——

  • 相关阅读:
    【Liunx】centos防火墙
    【Liunx】基础命令
    【Flask】CBV模式
    【Flask】第三方插件
    【Flask】登录练习
    【Flask】特殊装饰器
    【Flask】蓝图
    Django之视图层
    Django之路由控制配置
    Django之静态文件配置
  • 原文地址:https://www.cnblogs.com/pu369/p/5803259.html
Copyright © 2011-2022 走看看