使用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>

　　

　　

posted on 2016-06-28 14:01  什么嘉  阅读(1777)  评论(0)    收藏  举报

导航