zoukankan      html  css  js  c++  java
  • 使用rem,动态设置root font size

    (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = clientWidth / 7.5 + 'px';
                    //等价于clientWidth / 750 * 100 + 'px';
                };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);//resize
                doc.addEventListener('DOMContentLoaded', recalc, false);//reload
            })(document, window);
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="keywords" content="cms" />
        <meta name="description" content="cms"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script type="text/javascript">
            //为页面html动态设置font-size值
            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = clientWidth / 7.5 + 'px';
                    //等价于clientWidth / 750 * 100 + 'px';
                };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);//resize
                doc.addEventListener('DOMContentLoaded', recalc, false);//reload
            })(document, window);
        </script>
    </head>
    <body>
    
    </body>
    </html>
    

      

      

  • 相关阅读:
    linux umask使用详解
    Linux 解压压缩命令
    linux命令:tail 命令
    linux命令:head 命令
    linux下cat命令详解
    linux命令:rm 命令
    linux命令:mv命令
    Linux 的cp命令
    文件权限详解
    Linux ls命令参数详解
  • 原文地址:https://www.cnblogs.com/smjia/p/5623186.html
Copyright © 2011-2022 走看看