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即可

      

    ——

  • 相关阅读:
    vitual box 虚拟机调整磁盘大小 resize partiton of vitual os
    单向链表逆转
    搭建公司的React开发环境
    2018 ICPC 沈阳网络预赛 Fantastic Graph (优先队列)
    背包问题初探
    HDU 2588 GCD (欧拉函数)
    ZOJ
    ZOJ
    ZOJ
    HDU
  • 原文地址:https://www.cnblogs.com/pu369/p/5803259.html
Copyright © 2011-2022 走看看