前端开发js+rem动态计算font-size的大小,适配各种设备!

前端开发的小游戏
前端 游戏开发
html5游戏前端开发

html 代码

<!DOCTYPE html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <meta
            content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;”
            name=”viewport”
        />
        <meta content=”telephone=no” name=”format-detection” />
        <meta name=”format-detection” content=”email=no” />
        <meta http-equiv=”Cache-Control” content=”no-cache” />
        <title>响应式布局</title>
        <style>
            html {
                font-size: 20px;
                width: 100%;
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
            }
            header,
            footer {
                width: 100%;
                background: #17a578;
                color: #fff;
                font-size: 1rem;
                text-align: center;
                line-height: 2rem;
            }
            .footer {
                position: fixed;
                bottom: 0;
            }
            .box {
            }
            .public {
                width: 5rem;
                height: 5rem;
                font-size: 1.2rem;
                display: inline-block;
                text-align: center;
                color: #fff;
                line-height: 5rem;
                margin-top: 1rem;
            }
            .left {
                background: #f00;
            }
            .center {
                background: #048f74;
            }
            .right {
                background: #000;
            }
        </style>
    </head>
    <body>
        <header>页面头部</header>
        <div class=”box”>
            <div class=”public left”>左</div>
            <div class=”public center”>中</div>
            <div class=”public right”>右</div>
            <div class=”public left”>左</div>
            <div class=”public center”>中</div>
            <div class=”public right”>右</div>
        </div>
        <footer class=”footer”>页面底部</footer>
        <script>
            //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 = 20 * (clientWidth / 320) + ‘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>
    </body>
</html>
前端开发游戏
游戏后端开发和游戏前端开发对比
前端的游戏开发引擎
» 本文来自:前端开发者 » 《前端开发js+rem动态计算font-size的大小,适配各种设备!》
» 本文链接地址:https://www.rokub.com/7055.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!