zoukankan      html  css  js  c++  java
  • px换算rem

    px自动换算rem

     

    //designWidth:设计稿的实际宽度值,需要根据实际设置
    //maxWidth:制作稿的最大宽度值,需要根据实际设置
    //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
    ;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;
    //浏览器竖屏与横屏转换的BUG。
    function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    maxWidth = maxWidth || 540;
    width>maxWidth && (width=maxWidth);
    var rem = width * 100 / designWidth;
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(remStyle);
    } else {
    var wrap = doc.createElement("div");
    wrap.appendChild(remStyle);
    doc.write(wrap.innerHTML);
    wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
    refreshRem();

    win.addEventListener("resize", function() {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
    }
    }, false);

    if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
    } else {
    doc.addEventListener("DOMContentLoaded", function(e) {
    doc.body.style.fontSize = "16px";
    }, false);
    }
    })(750, 750);

    /**

    flexible.js 使用方法:

    1.复制上面这段代码到你的页面的头部的script标签的最前面。

    2.根据设计稿大小,调整里面的最后两个参数值。

    3.使用1rem=100px转换你的设计稿的像素,例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。

    也可以到我的Github上下载这个项目里的压缩代码flexible.min.js

    该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。

    假如你有一个块是.box{120px;height:80px;} 转为rem则为.box{1.2rem; height:.8rem;}

    **/

  • 相关阅读:
    算法习题---线性表之控制变量个数获取数据最小值
    C语言复习---矩形法求定积分函数
    sql server系统表详细说明
    sp_addlinkedserver 方法应用
    ipseccmd命令解析
    缓存淘汰算法(LFU、LRU、ARC、FIFO、MRU)分析
    uml定义的使用的关系
    GIS公交查询-flex/java
    arcgis软件集合
    arcgis地图数据集合
  • 原文地址:https://www.cnblogs.com/liuhaov/p/13488103.html
Copyright © 2011-2022 走看看