移动端超过540px固定宽度,不在缩放

最新推荐文章于 2025-03-06 19:46:39 发布

原创最新推荐文章于 2025-03-06 19:46:39 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端

本文介绍了一种使用CSS进行页面布局的适配方案，通过媒体查询实现不同屏幕尺寸下的良好显示效果。具体包括如何设定最大宽度、使元素居中以及字体大小的调整策略。

 body {

            max-width: 540px;
            margin: 0 auto;
        }

       @media (min-width:540px) {
        /* 设置媒体查询 超过540px */
       

            html {
                font-size: 54px !important;
                /* html字体大小固定,内容不在缩放,!important 最高级,防止后面样式覆盖 */
            }

            .header {
                /* 头部,宽度最大为540px,并且保持版心居中 */
                max-width: 540px;
                position: fixed;
                left: 50%;
                top: 0;
                transform: translateX(-50%);
            }
               /* 底部,宽度最大为540px,并且保持版心居中 */
                .footer{
                   width: 540px;
                   position: fixed;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                }
            }