[12th 鐵人賽] 給我一個 Box Day 4

區塊

我們在開天闢地的時候，網頁就是從區塊開始。

<header>
  <!-- 開天 -->
</header>
<main>
  <!-- 講幹話 -->
</main>
<footer>
  <!-- 闢地 -->
</footer>

這三個屬於比較基本的切分方式，接著比較複雜的東西由 <main> 來呈現。通常在 <main> 裡面，比較時髦一點的網頁我們稱之為 SPA（Single-page application），裡面就會有更多的區塊，包含內容、內容、內容、內容還是內容。

通常，一開始會有一個主視覺，可能會像是這個樣子，

<main>
    <section class="hero">
        <h1 class="slogan">Hello World</h1>
        <h4 class="description"></h4>
        <picture>
            <source srcset="/static/hero.avif,
                /static/[email protected] 2x,
                /static/[email protected] 3x">
            <source srcset="/static/hero.webp,
                /static/[email protected] 2x,
                /static/[email protected] 3x">
            <img srcset="/static/hero.jpg,
                /static/[email protected] 2x,
                /static/[email protected] 3x"
                src="/static/[email protected]"
                alt="Hello World">
        </picture>
    </section>
</main>

然後他就會乖乖的排排站好。

可是不對啊，我想要的是文字在左邊，然後圖片在右邊的這種感覺。所以，這裡所謂的區塊就會分成左邊跟右邊，是一個相對單純的顯示方式。對於這樣的標籤結構來說，並沒有不妥，只需要從樣式表做些調整就可以了。

例如說飄向 北 左方

然後就會發現了一些狀況，例如說 <h1>, <h4> 與 <picture> 在同一層，都是 float 的話會遇到大家都排在一起的問題。但是，我想要文字的 <h1> 與 <h4> 在同一個區塊，然後 <picture> 自己在右邊。

如果熟悉一點格線系統的話，使可以用 order 來解決這方面的問題。

其他的部分套路都差不多，你就是必須使用一些工具來解決區塊跟文字排版的問題，樣式表會是你的好幫手。至於是不是要用格線系統，以目前的普及程度來說，可能還要稍等一下。不過，隔壁棚的 Bootstrap 5 好像已經有在用了，或許能廣泛運用的時間也應該近了。

我也寫過一點 Grid，不嫌棄可以參考看看：

[CSS] 關於 Grid Layout 的使用姿勢

流

上面我們遇到的問題是，在標籤結構面上，我們盡量不去做額外的更動或繁雜的巢狀結構。那麼你就會遇到區塊流向的問題，如上面的狀況一樣，如果我使用了 float 的飄移效果來調整，我勢必需要對原有的結構做調整。不行嗎？可以，但是文件流向未必會符合我們所期待的樣子。

例如我想要有一點圖繞文的效果。

在網頁設計時，一般普通的情況下，我們是由大尺寸開始製作，例如說 4K 的寬度，然後一路做到所謂的「手機版」。然後如果你遇到的設計師沒有那麼天才的話，應該不至於拿到寬度是 2160px 的設計稿才對。

接著，你需要思考的事情是，

1. 最大滿版是 3840px。
2. 最小的尺寸是 iPhoneX 的 375points，如果 @1x 就是 375px。
3. 然後中間應該要經過幾個尺寸？
4. 你可以參考 這個網站 的統計數據。
5. 最後思考一下是不是要放棄。

如果設計師沒有考慮那麼多尺寸的話，建議前端工程師還是回頭找他討論會比較好。這不僅僅是圖片被放大或縮小的問題。文字本身也屬於設計的一環，文字的流向、斷點、行距、留白等等等，如果靠腦補能解決的話，那就真的阿彌陀佛了。

我想要定位點

其實有做過、玩過、用過所謂的所見即所得編輯器，就會發現，大家都把這個東西想像成 Microsoft Word，或是 Google Docs，總覺得應該是萬能的，排出來就應該要一樣，不然怎麼叫「所見即所得」。

那個有序列表我要中文的一二三，後面要頓號，下面的字要跟著頓號。
你看我 Word 就這樣啊。
怎麼？你排不出來嗎？
這編輯器怎麼那麼難用！

事實上，我們無法讓客戶或使用者理解到「網頁」的事情跟「文字編輯器」是兩件事，他只會跟你說，

啊你看 Google Docs 可以耶～
為什麼貼過去會歪掉
這編輯器怎麼那麼難用！

所以回到「流」的面向，文字與區塊在設計呈現時，必須避開一些可能會讓人有無限遐想的地方，舉例來說，

• 內容文字區塊，避免無端刻意斷行。
• 這個年代沒人在跟你文繞圖。
• 這邊要放X康少女體。
• 這圖片跟這圖片再分開一點，大概 0.5px。
• 這邊要小字 12px 不夠小。

上面吐嘈的點太多我就不贅述了。

所以說那個手機版

一樣還是從「流」出發，請從手機版開始「往上」設計。當然這個作法因人而異，不過，請諸位前端工程師，從最小尺寸的行動裝置尺寸開始「往上」思考。

沒有為什麼，因為現在手機使用量是大宗！

雖然 Mobile-First, Content-First 的說法已經不是新的東西，但，大多數接觸到的、聽到的或是看到的，大多都還是以所謂的「桌機版」為主軸。我換個方式說，

只要客戶主管的電腦沒跑版，手機沒跑版，就是最好的 Final 版！

至於 Media Query/Content-First 的事情，可以看看我 7 年前的廢話，

[CSS] 彈性化的 Media Query