尤川豪   ·  3月前
Exp. 1,630  ·  212 貼文  ·  145 留言

用 Bootstrap 設計 RWD 頁面的幾個小技巧

各尺寸的簡易理解

  • 無:全面套用,通常設定後給手機畫面使用
  • sm:手機橫放之後
  • md:平板電腦
  • lg:平板電腦橫放
  • xl:桌上電腦 PC

各裝置大小有異,但大方向是這樣。我自己是比較少用 sm,手機不常橫放瀏覽網頁。

將大量元素以4個為一排的時候

原本我都是寫 <div class="col-md-3"> ,覺得很夠用,在手機上會垂直堆疊,PC 上會4個一排

之後我發現寫 <div class="col-md-6 col-lg-4 col-xl-3"> 會更好

  • 手機上會堆疊
  • 平板上會2個一排
  • 平板橫放會3個一排
  • PC 上會4個一排

關於 1:3 的頁面排版

有側邊欄的 1:3 頁面排版很常見,我以前都是寫

<div class="col-md-3">...</div>
<div class="col-md-9">...</div>

之後發現在平板上,橫放時還好,直立時 1:3 的側邊欄會太細。用 lg 比較好。

<div class="col-lg-3">...</div>
<div class="col-lg-9">...</div>
  分享   共 136 次點閱
共有 0 則留言
您的留言
尤川豪
Exp. 1,630  ·  212 貼文  ·  145 留言

關於作者

Devs.tw 作者,喜歡分享&建造新東西的工程師。

歡迎在 Facebook 追蹤我!不定期分享有趣技術文章!

  查看個人檔案