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下配置Tomcat服务器
    Octopress + GitHub Page 搭建个人博客
    Cocoapods报错Unable to satisfy the following requirements
    类方法load和initialize的区别
    AFNetworking3.0 Post JSON数据
    iOS防止button重复点击
    iOS与H5交互遇到的坑
    cocoapods安装
    平时做的一些好玩或者测试的 项目 特效,动画
    webpack那些事儿
  • 原文地址:https://www.cnblogs.com/smjia/p/5623186.html
Copyright © 2011-2022 走看看