首页 > 移动平台 > 详细

移动端布局案例

时间:2020-04-16 21:02:31      阅读:67      评论:0      收藏:0      [点我收藏+]

rem布局,参考:https://www.jianshu.com/p/86f46ad5b51d

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../../css/mui.min.css" rel="stylesheet" />
        <script src="../../js/mui.js"></script>
        <script src="../../js/vue.js"></script>
        <style>
            body{max-width: 750px; min-width: 320px; margin: 0 auto; background-color: #F5F5F5;overflow-x: hidden;
                font-family: -apple-system,Helvetica,sans-serif;}
            div{font-size: .26rem; color: #474747;line-height: 2;}
            span{font-size: .28rem; color: #D1021F;}
        </style>
        <script>
            (function(doc, win) {
                var w = document.documentElement.clientWidth;
                if (w > 750) {
                    w = 750
                } else if (w < 320) {
                    w = 320
                }
                var f = w / 750 * 100 + "px";
                document.documentElement.style.fontSize = f;
                var docEl = doc.documentElement,
                    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
                    recalc = function() {
                        var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
                        if (clientWidth > 750) {
                            clientWidth = 750
                        } else if (clientWidth < 320) {
                            clientWidth = 320
                        }
                        if (!clientWidth) return;
                        docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘;
                    };
            
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
            })(document, window);
        </script>
    </head>

 

移动端布局案例

原文:https://www.cnblogs.com/zph666/p/12714890.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!