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

Question

需要改进的答案

我有5套物品。

1. 按钮
2. 文本
3. 落下
4. 分页
5. 图标

现在当屏幕尺寸很大时，即@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 网格为您提供了您想要的那种控制。

这是一个使用网格模板区域的简单片段。 当然，您将需要进一步调查以理清特定设置的各种项目的相对宽度。

 .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>