動態計算rem值

時間 2019-11-21

標籤動態計算 rem 简体版

原文原文鏈接

拷貝直接用便可根據UI設計稿750直接除以375  640直接除以320便可 適合不是不少元素頁面；<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Title</title>    <style>        html{            font-size: 100px;        }        *{            padding: 0;            margin:0;        }        .header{            text-align: center;            height: 0.5rem;            width:100%;            background-color: #00b793;            font-size: 0.18rem;            line-height:0.5rem;        }    </style></head><body>    <div class="header">        <span>杭州有數金融信息服務有限公司·杭州分公司</span>    </div>    <div class="content"></div>    <div class="footer"></div></body>    <script>//        document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';    //orientationchange方向改變事件    (function (doc, win) {        var docEl = doc.documentElement,//根元素html            //判斷窗口有沒有orientationchange這個方法，有就賦值給一個變量，沒有就返回resize方法。            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',            recalc = function () {                var clientWidth = docEl.clientWidth;                if (!clientWidth) return;                //把document的fontSize大小設置成跟窗口成必定比例的大小，從而實現響應式效果。                docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';            };        //alert(docEl)        if (!doc.addEventListener) return;        win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三個參數：第一個是事件名稱好比點擊事件onclick，第二個是要執行的函數，第三個是布爾值        doc.addEventListener('DOMContentLoaded', recalc, false)//綁定瀏覽器縮放與加載時間    })(document, window);    //alert(document.documentElement.clientWidth/320)    </script></html>

相關標籤/搜索

每日一句

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