移动端布局案例

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>

 

移动端布局案例

上一篇:rtmp协议视频流媒体播放器安卓版本在电话通话后视频无法打开的问题解决


下一篇:Android Google Play app signing 最终完美解决方式