請教flex 的切版

css flex 切版教學

咖咖拉 2020-04-15 09:57:54 ‧ 1501 瀏覽

分享至

flex 的RWD切版方法
https://codepen.io/ipphof/pen/ExVVBbr
這是我做的demo

我想做一個頁面
PC頁面 mobile頁面如codepen上一樣

我再寫這種類型的都會像Codepen上"常用方法" 把一個藍色DIV複製2次，可以達到視覺要求，可是這樣每次改都要寫2次，如果需要設ID就不能這樣寫。

想請問這樣的切版還有更好的方法寫嗎?
因為相容性需求不能使用grid

補充

<h1 class="text-4xl block">常用方法-RWD</h1>
<div class="container mx-auto">
  <div class="flex flex-wrap">
    <div class="w-1/3 min-h-full bg-red-200">
      <img src="https://cdn.hk01.com/di/media/images/3614670/org/7315dde86f704aeae66c3ed93fe5e99e.jpg/Lp6b2QhD-Fs4QTDGhDSVacoClms0f37Jz8Gi-8_Bovs">
    </div>
    <div class="w-2/3 bg-blue-300 sm:hidden">標題:123456</div>

    <div class="sm:w-2/3 w-full bg-red-300">
      <div class="w-full bg-blue-300 sm:block hidden">標題:123456</div>
      <div class="w-full bg-green-400">新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材</div>
    </div>
  </div>
</div>

因為設計的關係，我需要把以下 DIV 複製2次(一個再PC隱藏一個再mobile隱藏)

<div class="w-full bg-blue-300 sm:block hidden">標題:123456</div>

請問有沒有其他的方式可以取代?

tomatoeggs iT邦新手 5 級 ‧ 2020-04-15 10:42:52 檢舉

CSS Media:
https://muki.tw/tech/css-media-queries-introduce-basic/
看看這是不是你要的

咖咖拉 iT邦好手 1 級 ‧ 2020-04-15 11:36:20 檢舉

不是Media喔
我想問的是
像"常用方法-RWD"
有沒有更好的方法
可以從PC的頁面RWD到mobile 的頁面

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

通靈亡

iT邦高手 1 級 ‧ 2020-04-15 14:21:50

最佳解答

你要的是下面這樣的效果嗎？

https://codepen.io/ted59438/pen/LYpGYxo

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

咖咖拉 iT邦好手 1 級 ‧ 2020-04-15 14:51:42 檢舉

是的
不過用position: absolute;
電腦版的內容只要過多就會出現跑版問題
這樣也不太好!
https://codepen.io/ipphof/pen/zYvrYLb

通靈亡 iT邦高手 1 級 ‧ 2020-04-15 14:55:31 檢舉

「超過就會出現跑版問題」是什麼意思？
你是希望左右等高，右邊內容過多不會往下伸展的意思嗎？

咖咖拉 iT邦好手 1 級 ‧ 2020-04-15 14:59:09 檢舉

右邊會因為內容而改變
所以左右邊不等高

就跟下面一樣
https://codepen.io/ipphof/pen/PoPZoVm

所以希望用display的方式來寫!

通靈亡 iT邦高手 1 級 ‧ 2020-04-15 15:31:26 檢舉

更新了，像是這樣嗎？
https://codepen.io/ted59438/pen/LYpGYxo

咖咖拉 iT邦好手 1 級 ‧ 2020-04-15 15:37:13 檢舉

是的感謝你

登入發表回應

Charles Wang

iT邦新手 5 級 ‧ 2020-04-15 13:49:41

如果有誤或是要補充還請各位大神幫忙

目前外觀UI框架
有Bootstrap和Angular Material UI 之類的

flex的話，這兩種都有responsive的響應斷點
可以讓網頁根據不同狀況做變形
如下面

<div
      class=""
      fxLayout.gt-sm="row wrap"
      fxLayout.lt-md="column wrap"
      fxLayoutAlign="space-around"
    ></div>

上面這個div
就是把裡面內容物，根據視窗大小作變換排列
當視窗比960px大時，用橫向排列
比960px小時小時，用縱向排列

所以應用到你的範例上的話
應該可以省下一些特別根據手機版和PC版的內容

可上網查詢
angular flex layout cheat sheet
和玩玩這網站範例
https://tburleson-layouts-demos.firebaseapp.com/#/docs

看網站的架構和需求大概有分成以下幾類
1.直接分成手機版和PC版兩個網站
2.用@viewport和 @media 去根據使用者裝置決定要顯示手機版還是PC版網站
3.利用responsive響應式斷點去構成網站

所以還是要根據需求去使用適合的方向和方法

回應 1
分享
檢舉

咖咖拉 iT邦好手 1 級 ‧ 2020-04-15 14:18:26 檢舉

上面的範例
我是用tailwind css來寫的
類似Bootstrap

我想問的就是用Bootstrap的網格系統或其他，要怎麼寫這樣的版面
因為DIV的區塊關係，我必須用display: none;來寫，這樣就很不好..

謝謝你的回覆

以下是用Bootstrap 寫的範例!

<h1 class="text-4xl block">Bootstrap</h1>
<div class="container">
  <div class="row bg-red-300">
    <div class="col-4 px-0">
      <img src="https://cdn.hk01.com/di/media/images/3614670/org/7315dde86f704aeae66c3ed93fe5e99e.jpg/Lp6b2QhD-Fs4QTDGhDSVacoClms0f37Jz8Gi-8_Bovs" class="img-fluid">

    </div>
    <div class="col-8 d-sm-none d-block bg-blue-300 px-0">標題:123456</div>
    <div class="col-sm-8 col-12 px-0">
      <div class="col-12 d-sm-block d-none bg-blue-300">標題:123456</div>
      <div class="col-12 bg-green-400">新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材新鮮天然的食材</div>
    </div>
  </div>
</div>

把遊覽器縮小到500px以下應該就知道我想問的

登入發表回應