方式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;}}
【抬杠】在某些时候不希望用户缩小浏览器的宽度 因为咳咳~会导致你的布局混乱 那么这个代码就是帮助你如何限制浏览器宽度的