【抬杠】在某些时候不希望用户缩小浏览器的宽度,因为咳咳~会导致你的布局混乱,那么这个代码就是帮助你如何限制浏览器宽度的
原创
©著作权归作者所有:来自51CTO博客作者挚爱的强哥的原创作品,请联系作者获取转载授权,否则将追究法律责任
方式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;
}
}