uniapp 宽屏自适应

pages.json

"globalStyle": {
    "maxWidth": 768
},

公共样式

@mixin over-max-width {
    /* #ifdef H5 */
    @media (min-width: 768px) {
        width: 768px !important;
        margin: 0 auto;
    }
    /* #endif */
}

.over-max-width {
    @include over-max-width;
}

button{
   @include over-max-width;
   margin: 0 30rpx;
   font-size: 30rpx;
   border-radius: 10rpx;
   line-height: 2.8;
    
   // 修改样式
   &[type='primary'] {
        background: #fcdb66;
        color: #1d1d1f;
        font-size: 30rpx;
        font-weight: bold;
        
        &[plain] {
            background-color: transparent;
            color: #fcdb66;
            border-color:#fcdb66;
        }
    }
}

如果部分组件未限制住就加 class="over-max-width"

如button未限制住

<view class="flex-justify over-max-width">
    <button type="primary" plain="true">按钮1</button>
    <button type="primary">按钮2</button>
</view>
button {
    width: 48%;
    /* #ifdef H5 */
    @media (min-width: 768px) {
        max-width: 48%;
    }
    /* #endif */
    border-radius: 80rpx;
}

移动端

pc端

设置了maxWidth后fixed布局失效

position:fixed;
--window-left: 0;  // 替换 left:0;
--window-right: 0;  // 替换 right:0;

如果right不起效可参考：

juejin.cn/post/726599…

juejin.cn/post/726312…