我想制作一個(gè)按鈕網(wǎng)格，根據(jù)寬高比更改布局，這樣如果在高但不是很寬的布局上查看，它會是 2 寬和 8 下，在寬屏上它會是 8 寬和 2 下，中間是正常的 16:9，大約有 3 x 6。本質(zhì)上，我不希望它拉伸，我希望它重新排列。我該如何在 HTML/CSS 中做到這一點(diǎn)？我愿意使用框架。它們不是我的主要語言（我正在為 python 腳本做一個(gè)網(wǎng)絡(luò)界面），所以請?jiān)诨貜?fù)中詳細(xì)說明。
1 回答
呼喚遠(yuǎn)方
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
這都是由屏幕寬度決定的，而不是比例。有幾種方法可以處理它。假設(shè)這個(gè) HTML
<div?class="container"> ?<button?class="button"?id="button1"> ?<button?class="button"?id="button2">...?<button?class="button"?id="button18"></div>
處理它的最簡單方法是為按鈕提供固定寬度并讓瀏覽器處理它。
.container{
?width:?100%;
}
.button{
?width:?100px;
}如果您希望在不同的屏幕尺寸上有截然不同的行為，您將使用斷點(diǎn)。始終首先設(shè)計(jì)移動(dòng)設(shè)備。
.container{
?width:?100%;
}
@media?only?screen?and?(min-width:?768px){
??.container{
????width:?50%;
??}
}如果你想要更細(xì)粒度的控制，你想要的是flexbox。您可以使用 Flexbox 選擇是否希望按鈕縮小以適合或簡單地?fù)Q行到下一行。
.container{
??display:?flex;
??flex-wrap:?wrap;
??justify-content:?center;
}如果您對代碼感到不舒服，Bootstrap是一個(gè)為使 Flexbox 和斷點(diǎn)的實(shí)現(xiàn)變得非常容易而構(gòu)建的框架。
- 1 回答
- 0 關(guān)注
- 172 瀏覽
添加回答
舉報(bào)
0/150
提交
取消