因此,我已经设置了导航栏,它也可以响应,但可以响应特定的屏幕尺寸。之后,它不会缩小。我认为媒体查询在这里开始,但我无法解决。我要达到的目标是,一旦屏幕下降太多,则每个项目都应堆叠在另一个之下。
stats = list(map(lambda stat: stat.text, listing.find_all('div', {'class': 'hero_stat'}))) # this is a list
body {
margin: 0 auto;
}
.container {
display: flex;
background-color: lightblue;
border: 1px solid lightblue;
border-radius: 10px;
}
.border {
padding: 0px 10px;
}
.box-1 {
flex: 0.1;
}
.box-2 {
flex: 0.1;
}
.box-3 {
flex: 0.1;
}
.box-4 {
flex: 3;
text-align: right;
}
.box-5 {
flex: 0.1;
}
h4 {
color: white;
font-weight: normal;
}
答案 0 :(得分:0)
由于您已经在使用flex,因此应该可以解决问题:
@media screen and (max-width: 356px) {
.container {
flex-direction: column;
align-items: flex-start;
}
}
答案 1 :(得分:0)
首先在大屏幕中添加flex-wrap
属性,如下所示:
.container { 显示:flex; 背景颜色:浅蓝色; 边框:1px纯浅蓝色; border-radius:10px; flex-wrap:包装; }
然后在某个断点处添加媒体查询,例如400 px或320 px,如下所示:
@media屏幕和(最大宽度:400像素){ 。容器 { flex-direction:列; } }