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

mwmmt

于 2022-10-13 22:16:19 发布

阅读量191

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/mwmmt/article/details/127310763

版权

 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%);
                }
            }