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