自適應rem佈局

時間 2019-11-11

標籤自適應 rem 佈局欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>聖誕主題</title>
    <style type="text/css">
    section {
        width: 100%;
        height: 100%;
        background: red;
    }
    .page{
        width: 5rem;
        height: 10rem;
        background: yellow;
        font-size: 0.3rem;
    }
    </style>
</head>

<body>
    <section>
        <div class="page">rem跟着html:font-size變化</div>
    </section>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
    //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時，
    //注意如今當瀏覽器不支持orientationChange事件的時候咱們綁定了resize 事件。
    //總來的來就是監聽固然窗口的變化，一旦有變化就須要從新設置根字體的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //設置根字體大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

//綁定瀏覽器縮放與加載時間
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>

</html>

來自：http://www.imooc.com/code/10547javascript

js動態計算rem

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

來自：https://segmentfault.com/a/1190000003690140css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。