尤川豪   ·  5年前
445 貼文  ·  275 留言

用 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>
  分享   共 2,548 次點閱
共有 0 則留言
還沒有人留言。歡迎分享您的觀點、或是疑問。
您的留言
尤川豪
445 貼文  ·  275 留言

Devs.tw 是讓工程師寫筆記、網誌的平台。隨手紀錄、寫作,方便日後搜尋!

歡迎您一起加入寫作與分享的行列!

查看所有文章