[操作疑難] responsive web, 遇到這類 design, 大家通常會唔會用 grid去做?

responsive web(bootstrap)), 遇到這類 design, 大家通常會唔會用 grid去做?
定就咁把圖片 float right/left + margin 算?
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

都係 CSS, 兩者都做到 responsive, 都係寫 media query 去做

用 grid 係將出版業界排版手法搬落網頁, 係令資訊排版冇咁易排得樣衰嘅速成方法

TOP

寫好左一個 grid ,永遠都係用咁樣既數值,既可以維持成個網頁統一性,又唔需要突登另外煩 margin,何樂而不為

TOP

即係repsponsive 準備幾set media css 就 ok? 唔駛理grid ?

via HKEPC Reader for Android

TOP

諗得來都寫左啦
我會用framework本身的grid,無謂reinvent the wheel

TOP

回覆 5# 梁炳


如果如圖一, 圓形貓圖想在 mobile 版排第1行,左邊內文排第二行咪唔得?
(即是: 圖1 文1 圖2 文2, 而不是現在的 文1 圖1  圖2 文2 )

TOP

本帖最後由 不明人士 於 2015-4-27 02:08 編輯
回覆  梁炳


如果如圖一, 圓形貓圖想在 mobile 版排第1行,左邊內文排第二行咪唔得?
(即是: 圖1 文1 圖2 ...
gamezz 發表於 2015-4-26 22:15


個別修改煩啲定係每一PART都要寫煩啲,睇情況同埋你有幾多時間既啫~

如果你真係想做到你講果隻咁樣,又唔想再寫過D CSS,最簡單咪寫兩個版本,到時候HIDE左唔係適合果個media 果個~

TOP

回覆  梁炳


如果如圖一, 圓形貓圖想在 mobile 版排第1行,左邊內文排第二行咪唔得?
(即是: 圖1 文1 圖2 ...
gamezz 發表於 2015-4-26 22:15


冇記錯bootstrap ordering可以實現
http://stackoverflow.com/questio ... n-twitter-bootstrap

TOP

回覆  梁炳


如果如圖一, 圓形貓圖想在 mobile 版排第1行,左邊內文排第二行咪唔得?
(即是: 圖1 文1 圖2 ...
gamezz 發表於 2015-4-26 22:15


當然可以,睇下bootstrap個doc啦(如果你用bootstrap)
基本HTML結構就依 "圖1 文1 圖2 文2"
  1. <div class="row">
  2. <div class="col-xs-12"><!-- Cat photo --></div>
  3. <div class="col-xs-12"><!-- Paragraph --></div>
  4. </div>
  5. <div class="row">
  6. <div class="col-xs-12"><!-- Cat photo --></div>
  7. <div class="col-xs-12"><!-- Paragraph --></div>
  8. </div>
複製代碼
然後大Screen用push/pull class
  1. <div class="row">
  2. <div class="col-xs-12 col-md-3 col-md-push-9"><!-- Cat photo --></div>
  3. <div class="col-xs-12 col-md-9 col-md-pull-3"><!-- Paragraph --></div>
  4. </div>
  5. <div class="row">
  6. <div class="col-xs-12 col-md-3"><!-- Cat photo --></div>
  7. <div class="col-xs-12 col-md-9"><!-- Paragraph --></div>
  8. </div>
複製代碼

TOP

我自己試完先明...
PUSH = move RIGHT from ORG position
PULL = move LEFT from ORG position
http://jsfiddle.net/4cbzY/633/

TOP