限制html窗⼝最⼩宽度，给页⾯⼀个最⼩宽度，⼩于这个宽度
时，出现横向滚动条...
这⾥以vue-cli初始化的项⽬为例：
1. body,html
html,
body {
height: 100%;
width: 100%;
html横向滚动条样式}
2. App.vue中
#app {
height: 100%;
width: 100%;
}
3. Home.vue组件
title
.home {
min-width: 1024px; // 设置的最⼩宽度，⼩于1024时，会出现滚动条
min-height: 100%;
background-color: #09152C;
display: flex;
flex-direction: column;
.
header {
height: 57px;
background-color: red;
color: #ffffff;
display: flex;
align-items: center;
padding: 0 20px;
font-size: 16px;
font-weight: bold;
}
.content {
flex-grow: 1; // 让content⾼度铺满剩余的home
display: flex; //让⾥⾯的直接⼦元素⾼度占满整个content
padding: 0 10px 32px;
> div {
width: 100%;
background: yellow;
color: #000;
}
}
}
4.最终效果
此时屏幕宽度⼩于1024px，出现了横向滚动，这样页⾯就不会因为太窄⽽影响到布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。