[Flexbox] 排版探索(二) -- 加上media query

試著利用flexbox實現 Mobile-First approach排版。

Mobile-First 的方式就是我們先撰寫給mobile的CSS, 然後我們利用media query來指定特定的style(例如較大的螢幕寬度)。

先設計一下我想要的基本結構:

<div class="Wrapper">
  <div class="Header">Header</div>
  <div class="Main">
    <div class="Content">Content</div>
    <div class="Desc">Desc</div>
  </div>
  <div class="Footer">Footer</div>
</div>

對應的CSS外觀:

.Wrapper {background: black;}
.Header {background: yellow;}
.Content {background: green;}
.Desc {background: Fuchsia;}
.Footer {background: blue;}
.Header, .Desc, .Content, .Footer{ text-align: center;}

長這樣:

mobile flexbox排版

手機版沒啥梗, 依序顯示.Header, .Content, .Desc, .Footer:

.Wrapper, .Main {
  display: flex;
  flex-direction: column;
}
.Wrapper {
  min-height: 100vh;
}
.Main, .Content {
  flex: 1;
}

可以參考Flexbox排版探索(一)

media query -- 給大一點的螢幕

Media queries 是一些簡單的filters, 用來指定特定的style, 這讓我們很方便的可以依照使用裝置的寬度來調整各種style, 例如排版啦字體大小啦等等。

這裡設定兩個style, 手機(螢幕寬度小於600px)就用我們上面寫的預設版面, 超過600px寬度的時候我就將.Desc和 .Content並排, 並且.Desc比較窄放置於左邊。

新增CSS如下:

@media (min-width: 37.5em){
  .Main {
    flex-direction: row;
  }
  .Desc {
    flex: 0 0 12em;
    order: -1;
  }
}

media query的語法如下:

@media (query) {
  /* 當query條件符合, 就使用這裡的CSS規則 */
}

常用的query查詢條件有: min-width, max-width, min-height, max-height。

這裡設定的條件是min-width: 37.5em表示：當螢幕寬度大於37.5em的時候, 就會執行這個@media區塊。

當螢幕大於37.5em, 我就將.Main的flex-direction改回row(由左到右橫排)。

.Main下面有兩個flex item, 將.Desc設定flex: 0 0 12em表示將.Desc固定在12em的寬度, 設定order:-1表示反轉排列的順序, 這樣就會變成.Desc在左方, .Content這個item就會在右方。

結果如下:

大功告成!

more

Use CSS media queries for responsiveness

How to write Mobile-first CSS

flexboxes + media queries = awesome layouts

<< 回到文章列表