如何根据屏幕大小使用媒体查询更改UI

Question

需要改进的答案

我有5套物品。

<

1. 按钮/gh>
3. 下拉
4. 分页
<
5. 图标/gh>

现在当屏幕尺寸较大时，即@media (min-width: 990px) {}

我想要所有的项目在一个单独的行，即

[button][Text][Dropdown][Pagination][Icon]

当屏幕大小为中等时，即@media (max-width: 990px) {}

我想要所有的项目在3行，即

[button]
[Text][Dropdown]
[Pagination][Icon]

当屏幕尺寸较小时，即@media (max-width: 575px) {}

我想要所有的项目在4行，即

[button]
[Text]
[Dropdown]
[Pagination][Icon]

我已经在这个代码沙箱中尝试过了。有人能给我一个更好的答案吗?

谢谢。

@media only screen and (min-width: 990px) {
.items {
display: flex;
flex-direction: row;
margin-top:30px;
}
.item23 {
display: flex;
flex-direction: row;
}
}
@media only screen and (max-width: 990px) {
.items {
display: flex;
flex-direction: column;
margin-top:30px;
}
.item23 {
display: flex;
flex-direction: row;
margin-top:30px;
}
}
@media only screen and (max-width: 575px) {
.items {
display: flex;
flex-direction: column;
margin-top:30px;
}
.item23 {
display: flex;
flex-direction: column;
margin-top:30px;
}
}

<div class="container">
<div class="items">
<div class="item1">
<button> button 1 </button>
<button> button 2 </button>
<button> button 3 </button>
<button> button 4 </button>
<button> button 5 </button>
</div>
<div class="item23">
<div class="item2">
<span> I am a Text! </span>
</div>
<div class="item3">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose letter <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><span>A</span></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="item4">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<div class="item5">
<i class="bi bi-gear"></i>
<div>
</div>
</div>

裁判:https://codepen.io/belt-basya/pen/vYRXBzE

Answer 1

你可能会发现CSS网格提供了你想要的那种控制。

下面是一个使用grid-template-areas的简单代码片段。当然，您需要进一步调查，以便为您的特定设置整理出各种项的相对宽度。

.items {
display: grid;
grid-template-areas: 'Button Text Dropdown Pagination Icon';
margin-top: 30px;
}
.item1 {
grid-area: Button;
background: red;
}
.item2 {
grid-area: Text;
background: green;
}
.item3 {
grid-area: Dropdown;
background: blue;
}
.item4 {
grid-area: Pagination;
background: cyan;
}
.item5 {
grid-area: Icon;
background: yellow;
}
@media only screen and (max-width: 990px) {
.items {
grid-template-areas: 'Button Button' 'Text Dropdown' 'Pagination Icon';
}
}
@media only screen and (max-width: 575px) {
.items {
grid-template-areas: 'Button Button' 'Text Text' 'Dropdown Dropdown' 'Pagination Icon';
}
}

<div class="container">
<div class="items">
<div class="item1">
<button> button 1 </button>
<button> button 2 </button>
<button> button 3 </button>
<button> button 4 </button>
<button> button 5 </button>
</div>
<div class="item2">
<span> I am a Text! </span>
</div>
<div class="item3">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose letter <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><span>A</span></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="item4">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<div class="item5">
<i class="bi bi-gear">I</i>
</div>
</div>
</div>