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

?

總結

以上是生活随笔為你收集整理的【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。