利用rem实现响应式布局

最新推荐文章于 2022-08-19 09:57:45 发布

Baddyo

最新推荐文章于 2022-08-19 09:57:45 发布

阅读量624

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Baddyo/article/details/78257297

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
        <meta name="format-detection" content="telephone=no">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/channel.css" />
        <script type="text/javascript">
            (function(designWidth, maxWidth) {
                var doc = document,
                    win = window,
                    docEl = doc.documentElement,
                    remStyle = document.createElement("style"),
                    tid;

                function refreshRem() {
                    var width = docEl.getBoundingClientRect().width;
                    maxWidth = maxWidth || 540;
                    width > maxWidth && (width = maxWidth);
                    var rem = width * 100 / designWidth;
                    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
                }

                if(docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(remStyle);
                } else {
                    var wrap = doc.createElement("div");
                    wrap.appendChild(remStyle);
                    doc.write(wrap.innerHTML);
                    wrap = null;
                }
                //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
                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);
        </script>
    </head>

Baddyo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用rem实现响应式布局

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
复制链接

扫一扫