本文共 943 字，大约阅读时间需要 3 分钟。

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

转载地址：http://nfxaf.baihongyu.com/