微信二维码
微博二维码
qq号二维码

REM布局

王伟平 2020.02.29 49人浏览
一个移动端布局方式

rem 是 css 的长度单位,它是相对于 <html> 元素的 font-size 的相对值。假设 html { font-size: 20px; },那么 1rem 就等于 20px。


rem布局方法1:

使用JavaScript让html的font-size随着浏览器窗口大小改变而改变

(function(designWidth, maxWidth) {

    var doc = document,

        win = window;

    var docEl = doc.documentElement;

    var tid;

    var rootItem, rootStyle;


    function refreshRem() {

        var width = docEl.getBoundingClientRect().width;

        if(!maxWidth) {

            maxWidth = 540;

        };

        if(width > maxWidth) {

            width = maxWidth;

        }

        //与淘宝做法不同,直接采用简单的rem换算方法1rem=100px

        var rem = width * 100 / designWidth;

        //兼容UC开始

        rootStyle = "html{font-size:" + rem + 'px !important}';

        rootItem = document.getElementById('rootsize') || document.createElement("style");

        if(!document.getElementById('rootsize')) {

            document.getElementsByTagName("head")[0].appendChild(rootItem);

            rootItem.id = 'rootsize';

        }

        if(rootItem.styleSheet) {

            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)

        } else {

            try {

                rootItem.innerHTML = rootStyle

            } catch(f) {

                rootItem.innerText = rootStyle

            }

        }

        //兼容UC结束

        docEl.style.fontSize = rem + "px";

    };

    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);


rem布局方法2:

html {

    font-size: 10px

}


@media screen and (min-width:321px) and (max-width:375px) {

    html {

        font-size: 11px

    }

}


@media screen and (min-width:376px) and (max-width:414px) {

    html {

        font-size: 12px

    }

}


@media screen and (min-width:415px) and (max-width:639px) {

    html {

        font-size: 15px

    }

}


@media screen and (min-width:640px) and (max-width:719px) {

    html {

        font-size: 20px

    }

}


@media screen and (min-width:720px) and (max-width:749px) {

    html {

        font-size: 22.5px

    }

}


@media screen and (min-width:750px) and (max-width:799px) {

    html {

        font-size: 23.5px

    }

}


@media screen and (min-width:800px) {

    html {

        font-size: 25px

    }

}



分享到:
UI面试常见问题,你了解多少
  • 2019.07.11
  • 高频前端面试题5
  • 2020.03.31
  •