區塊
我們在開天闢地的時候，網頁就是從區塊開始。
<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，不嫌棄可以參考看看：
流
上面我們遇到的問題是，在標籤結構面上，我們盡量不去做額外的更動或繁雜的巢狀結構。那麼你就會遇到區塊流向的問題，如上面的狀況一樣，如果我使用了 float 的飄移效果來調整，我勢必需要對原有的結構做調整。不行嗎？可以，但是文件流向未必會符合我們所期待的樣子。
例如我想要有一點圖繞文的效果。
在網頁設計時，一般普通的情況下，我們是由大尺寸開始製作，例如說 4K 的寬度，然後一路做到所謂的「手機版」。然後如果你遇到的設計師沒有那麼天才的話，應該不至於拿到寬度是 2160px 的設計稿才對。
接著，你需要思考的事情是，
- 最大滿版是
3840px。 - 最小的尺寸是 iPhoneX 的
375points，如果 @1x 就是375px。 - 然後中間應該要經過幾個尺寸？
- 你可以參考 這個網站 的統計數據。
最後思考一下是不是要放棄。
如果設計師沒有考慮那麼多尺寸的話，建議前端工程師還是回頭找他討論會比較好。這不僅僅是圖片被放大或縮小的問題。文字本身也屬於設計的一環，文字的流向、斷點、行距、留白等等等，如果靠腦補能解決的話，那就真的阿彌陀佛了。
我想要定位點
其實有做過、玩過、用過所謂的所見即所得編輯器，就會發現，大家都把這個東西想像成 Microsoft Word，或是 Google Docs，總覺得應該是萬能的，排出來就應該要一樣，不然怎麼叫「所見即所得」。
那個有序列表我要中文的一二三，後面要頓號，下面的字要跟著頓號。
你看我 Word 就這樣啊。
怎麼？你排不出來嗎？
這編輯器怎麼那麼難用！
事實上，我們無法讓客戶或使用者理解到「網頁」的事情跟「文字編輯器」是兩件事，他只會跟你說，
啊你看 Google Docs 可以耶～
為什麼貼過去會歪掉
這編輯器怎麼那麼難用！
所以回到「流」的面向，文字與區塊在設計呈現時，必須避開一些可能會讓人有無限遐想的地方，舉例來說，
- 內容文字區塊，避免無端刻意斷行。
- 這個年代沒人在跟你文繞圖。
- 這邊要放X康少女體。
- 這圖片跟這圖片再分開一點，大概
0.5px。 - 這邊要小字
12px不夠小。
上面吐嘈的點太多我就不贅述了。
所以說那個手機版
一樣還是從「流」出發，請從手機版開始「往上」設計。當然這個作法因人而異，不過，請諸位前端工程師，從最小尺寸的行動裝置尺寸開始「往上」思考。
沒有為什麼，因為現在手機使用量是大宗！
雖然 Mobile-First, Content-First 的說法已經不是新的東西，但，大多數接觸到的、聽到的或是看到的，大多都還是以所謂的「桌機版」為主軸。我換個方式說，
只要客戶主管的電腦沒跑版，手機沒跑版，就是最好的 Final 版！
至於 Media Query/Content-First 的事情，可以看看我 7 年前的廢話，
