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