动态rem简单示例

作者: 该帐号已被查封_才怪 | 来源:发表于2016-12-12 18:10 被阅读264次

动态rem简单示例
移动端布局方案 rem
动态REM
动态REM
动态rem
动态REM
动态REM
动态REM
动态REM
动态rem

之前写了个简单响应式的例子，其实那个就是将宽度按百分比的写法或者写两个样式，再利用媒体查询的方式显示相应的宽度或样式；刚刚写了个动态rem的简单范例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>rem简单例子</title>
    <script type="text/javascript">
    (function(doc, win) {

        var
            style = doc.createElement("style"),
            resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
            setRemFun = function() {
                var pageWidth = doc.documentElement.clientWidth,
                    htmlFontSize = "html{font-size:" + pageWidth / 16 + "px}";
                style.innerHTML = htmlFontSize;
                document.head.appendChild(style);
            };

        doc.addEventListener("DOMContentLoaded", setRemFun);
        win.addEventListener(resizeEvt, setRemFun);

    }(document, window))
    </script>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    
    .content {
        background-color: red;
        border: 1px solid #000;
        box-sizing: border-box;
        height: 1rem;
        width: 8rem;
        float: left;
        font-size: 1rem;
        line-height: 1rem;
        text-align: center;
    }
    
    .ct:after {
        display: block;
        content: "";
        clear: both;
    }
    </style>
</head>

<body>
    <div class="ct">
        <div class="content">我是1</div>
        <div class="content">我是2</div>
    </div>
</body>

</html>

上述代码运行后，无论在什么样的尺寸的屏幕下，两个div的宽度总是均分整个屏幕，在手机上也是如此（包括横屏、竖屏）。