zoukankan      html  css  js  c++  java
  • 移动端必备rem布局

    在写移动端布局的时候,个人比较喜欢的一段代码。

    (function(win){
        var docEl = win.document.documentElement;
        var timer = '';
        function changeRem(){
            var width = docEl.getBoundingClientRect().width;
            if (width > 540)//最大宽度,若果兼容到ipad的话把这个去掉就行
            {
                width = 540;
            }
            var fontS = width/10;//把设备宽度10等分 等同于用vw来做
            docEl.style.fontSize = fontS + "px";
        }
        //页面尺寸发生改变的时候就再执行changeRem
        win.addEventListener("resize",function(){
            clearTimeout(timer);
            timer = setTimeout(changeRem,30);
        },false);
        //页面加载的时候,若果是调用缓存的话就再执行changeRem
        win.addEventListener("pageshow",function(e){
            if (e.persisted)//缓存
            {
                clearTimeout(timer);
                timer = setTimeout(changeRem,30);
            }
        },false);
        changeRem();
    })(window)

    简单解读下,浏览器默认字体大小16px=1rem,把浏览器宽度平均分为10份,如果设计稿是640*750,那么1rem=64px,宽度为100px的盒子就是,100/64rem。上面的注释比较清晰。

  • 相关阅读:
    数据库连接池、事务
    JDBC、单元测试、DAO模式
    归并排序
    插入排序
    MySQL数据库
    JQuery
    JavaScript
    算法训练 连续正整数的和
    算法提高 寻找三位数
    算法训练 学做菜
  • 原文地址:https://www.cnblogs.com/JeneryYang/p/8658205.html
Copyright © 2011-2022 走看看