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

98 阅读 0 评论 65 点赞

我是靠谱客的博主高高刺猬，这篇文章主要介绍【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的，现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*限制浏览器宽度*/
@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代码，自由度更高，灵活修改宽度限制的值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*限制浏览器宽度*/    
$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;
    }
}