[Day 27] 所以說那個手機版

第 12 屆 iThome 鐵人賽

DAY 27

Modern Web

我說那個手機版系列第 27 篇

12th鐵人賽 media query grid layout rwd awd

閃光洽

2020-10-11 16:01:29

1145 瀏覽

分享至

Grid 還是 Flex

我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？

我認真說，如果你是 AWD 的話，用 Flex 就綽綽有餘。

如果你是採用 RWD 的話，用 Grid 或許比較方便。

當然，這些事情沒有一定的準則，不然你看看大家 Bootstrap 還不是用得很快樂，有人在意他到底是 Grid 還是 Flex 嗎？

沒有。你只在乎你自己。

回過頭來看這幾年樣式表的發展，其實直到 Grid 的出現，好像大家才慢慢意識到所謂的「樣式表」是真的拿來設計排版樣式的。不然，在 Grid 出現之前，所謂的「排版」這件事情，可能有多數的結構設計，是在 HTML 裡面完成，而不是像格線系統這樣，可以在樣式表中定義格線區塊的位置、命名、順序與結構。

當然，在 Flex 出現的時候，我們終於可以鬆一口氣，不用再處理所謂的 .clearfix 這種事情，但，說句比較不中聽的話，對於排版結構來說，Flex 也是這麼恰好的取代了 float 這件事情，然後多了一些比較炫砲的對齊效果這樣。對於前端工程師而言，大抵上就是少處理了各種對齊所衍生出來的狀況。

相較之下，格線系統的出現，明確的定義了排版相關的事情，雖然目前 subgrid 還在吵架當中，不過目前單就 Grid 的使用與適用面向來說，算是對於排版這件事情有相當明確的幫助。

結構語意

或許有的人會認為，格線系統這樣擺在樣式表裡面，是不是有點撈過界？這一點我個人是樂見其成，畢竟規範樣式結構這件事情，交給樣式表去做也沒什麼不好，況且，相較於放在 HTML 結構裡完成，規則與彈性相對來說就沒有格線系統那麼大。

那麼，關於結構語意這些事情，還是回到最一開始的初衷，從行動裝置（手機版）出發，向上發展，基本上你不會因為複雜的 DOM 結構，而喪失了結構語意。只要你確認好文件的「流」，基本上我覺得這種出現大量 DOM 巢狀結構，或是 DOM Tree 太深的事情不太容易發生。當然，寫得好的前端工程師，即便不是 Grid 應該也不至於發生才是。

如果從行動裝置為出發點來看，我們的 HTML 會相當簡潔，

<header>
    <img />
    <nav>
        <ul>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </nav>
</header>
<main>
    <aside>
        <ul>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </aside>
    <section>
        <article>
            <h1></h1>
            <p></p>
        </article>
    </section>
</main>
<footer>
    <p>Copyright</p>
</footer>

基本上你就想，當我把所有樣式表抽離的時候，這些結構在畫面上「看起來」還會保持一定的可讀性，且 DOM 結構明確，DOM Tree 也不至於太深（當然，這個範例太簡單了，相對來說就沒那麼複雜）。因此，即便你向上發展，基本上也只是更動樣式表中，關於格線系統方面的設定，讓他在畫面上「呈現」出你想要的樣子，而整個 HTML 基本上是不會有太大更動的。