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

方式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;
    }
}

最后

以上就是高高刺猬为你收集整理的【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的的全部内容，希望文章能够帮你解决【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。