【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的

方式1：简单纯粹，非Vue项目直接复制用完即走！

/*限制浏览器宽度*/
@media screen and (max-width: 1200px) {
    html {
        overflow: hidden;
    }

    html:after {
        content: "← 亲！请保持网页宽度>1200像素 →";
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        color: white;
        background: #3873FF;
        z-index: 999999999;
    }
}

方式2：SCSS代码，自由度更高，灵活修改宽度限制的值

/*限制浏览器宽度*/    
$minScreenWidth:1200;//浏览器最小宽度
@media screen and (max-width:$minScreenWidth+'px') {
    html {
        overflow: hidden;
    }

    html:after {
        content: "← 亲！请保持网页宽度>#{$minScreenWidth}像素 →";
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        color: white;
        background: #3873FF;
        z-index: 999999999;
    }
}

最后

以上就是高高刺猬最近收集整理的关于【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的的全部内容，更多相关【抬杠】在某些时候不希望用户缩小浏览器内容请搜索靠谱客的其他文章。