移动端(H5)设置最大宽度兼容PC

最新推荐文章于 2025-03-21 21:21:34 发布

黄河爱浪

最新推荐文章于 2025-03-21 21:21:34 发布

阅读量7k

点赞数 1

分类专栏： html 文章标签： html5 css3

本文链接：https://blog.csdn.net/u013350495/article/details/105258743

版权

html 专栏收录该内容

5 篇文章

订阅专栏

为使手机页面在电脑浏览器中打开时依然保持居中显示的良好布局，所以需要一个良好的兼容结构。

源码示例效果图：

手机端	电脑端

源码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="author" content="qq 1846492969,helang.love@qq.com">
    <title>移动端设置最大宽度兼容PC</title>
    <style type="text/css">
        body{
            margin: 0;
            background-color: #F6F6F6;
            color: #333;
        }
        header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
        }
        header>div{
            height: 44px;
            background-color: #fff;
            max-width: 420px;
            width: 100%;
            margin: 0 auto;
            border-bottom: #e5e5e5 solid 1px;
            line-height: 43px;
            text-align: center;
            font-size: 16px;
        }
        footer{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 98;
        }
        footer>div{
            height: 50px;
            background-color: #fff;
            max-width: 420px;
            width: 100%;
            margin: 0 auto;
            border-top: #e5e5e5 solid 1px;
        }
        footer>div>div{
            height: 100%;
            line-height: 49px;
            text-align: center;
            font-size: 16px;
        }
        footer .active{
            color: #d43f3a;
        }
        main{
            max-width: 420px;
            width: 100%;
            margin: 0 auto;
            padding: 44px 0 50px 0;
            box-sizing: border-box;
            background-color: #fff;
        }
        /* 列式弹性盒子 */
        .flex_col {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-box-pack: start;
            -webkit-box-align: center;

            display: -ms-flexbox;
            -ms-flex-wrap: nowrap;
            -ms-flex-direction: row;
            -ms-flex-pack: start;
            -ms-flex-align: center;
            -ms-flex-line-pack: center;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
        }
        .flex_col.flex_col_4>*{width: 25%;}
    </style>
</head>
<body>
    <header>
        <div>顶部标题</div>
    </header>
    <main>
        <div style="height: 1000px;padding: 0 15px;" id="helang">
            <script type="text/javascript">
                for (var i = 1; i <= 6; i++){
                    document.write('<h'+i+'>标题-'+i+'</h'+i+'>');
                }
            </script>
        </div>
    </main>
    <footer>
        <div class="flex_col flex_col_4">
            <div class="active">消息</div>
            <div>通讯录</div>
            <div>发现</div>
            <div>我</div>
        </div>
    </footer>
</body>
</html>