文博个人博客

学无止境,记录程序记录生活,代码改变世界~

手机端页面该如何去写

2021-3-2 文博 WEB前端

手机样板 HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="base.js"></script>
        <style>
            body{
            max-width: 750px;
            margin: 0 auto;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            background: #f2f2f2;
        }
        /*header*/
        header{
            position: fixed;
            width: 100%;
            max-width: 750px;
            top: 0;
            left: auto;
            z-index: 999;
            height: 0.9rem;
            background: #f00;
        }
        /*页面主体*/
        main{
            padding-top: 0.9rem;
            background: #0FB25F;
        }
        /*页面脚部*/
        footer{
            z-index: 999;
            position: fixed;
            width: 100%;
            max-width: 750px;
            bottom: 0;
            left:auto;
            height: 0.9rem;
            background: #f00;
            border-top: 1px solid #ddd;
        }
        
        h3{
            color: #fff;
        }
        
        
        /********************************************************
        /*  以下是各个设备自适应样式,如果页面过多,建议放到 base.css 中
         */
        /*平板 宽屏 自适应*/
        @media only screen and (max-width: 1024px){
            /*使用移动终端时的样式设定*/
            body{
                max-width: 100%!important;
            }
            header{
                max-width: 100%!important;
            }
            footer{
                max-width: 100%!important;
            }
        }
        @media only screen and (min-width: 1024px){
            /*使用PC终端时的样式设定*/
            body{
                margin: 0 auto!important;
            }
        }
        a{
            text-decoration: none!important;
        }
        input,button{
            outline: none!important;
        }
        </style>
    </head>
    <body>
            <header>
                <h3>我是页面头部</h3>
            </header>
            <main>
                <h3>我是页面主体</h3>
            </main>
            <footer>
                <h3>我是页面脚部</h3>
            </footer>
    </body>
</html>

 

CSS样式

 

(function () {
    function resize() {
        var root = document.documentElement;
        var w = root.getBoundingClientRect().width;
        var PC = IsPC();
        if (PC){
            root.style.fontSize = '100px';
        }else {
            if (w > 750 && w !== 1024) {
                w = 750
            }
            var fontSize = w / 7.5 + "px"; /*设计稿是750*/
            root.style.fontSize = fontSize;
        }
    }
    resize();
    var t;
    window.addEventListener("resize", function () {
        clearTimeout(t);
        t = setTimeout(resize, 300);
    })

    //判断是否是 PC 端
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
})();

 

发表评论: