3.2 KiB
3.2 KiB
description, alwaysApply
| description | alwaysApply |
|---|---|
| 全站版面與元件視覺預設：等高等寬、短字層置中、img 比例、捲軸禁則。 | true |
【設計視覺預設】站主版面與元件預設（設計大原則）
以下為全站／新區塊的預設假設，不必每個區域重複交代；若該次需求明講例外再打破。
- 同一列／並排多欄：預設 等高（例如 flex 同列
align-items: stretch、grid 同列對齊高度），除非該次明講要頂對齊或其他非等高編排。 - 同一層級、同類可重複元件（例如多張 CARD、同一 pattern 的 tile）：預設 等寬（同一 breakpoint 下寬度一致），除非明講破格。
- 短字層（站主慣稱「十字以內」——極短標、標籤、按鈕字、頂欄主標、區塊小標等；語意上不要硬拆成兩行）：盡量 單行、不換行；水平置中。
- 交付前必檢・置中（每次改版面／新區塊／表單標題後自動確認，勿等站主提醒）：
- 短字層、區塊主標、表單大標、按鈕列、圖示＋標題並排：父層
text-align: center或display: flex+justify-content: center+align-items: center（必要時margin-inline: auto）。 ::before／::after裝飾圖（含 SVG 背景）與文字同一行時：標題用inline-flex+align-items: center+justify-content: center，勿只靠inline-block+vertical-align猜視覺置中。- 內文層
p維持置左；僅容器可max-width+margin-inline: auto置中區塊本身。 - 窄螢幕若標題過長：先縮字級或
letter-spacing，仍無法單行再與站主確認是否允許換行。
- 短字層、區塊主標、表單大標、按鈕列、圖示＋標題並排：父層
- 內文層（body）（超過短字層——
<p>整段導語、說明、列表前引言）：允許自然換行；置左對齊。規則敘述用「內文／body 層」，不要用某個*-lead、*-intro等 class 名當成這一層的定義。 - 怎麼判斷：看實際字數與語意（是否明顯超過約十字、是否為段落內文），不是看 class 字串。HTML 裡的
<body class="某頁">是頁面作用範圍，與「內文層」是兩件事，勿混為一談。 - CSS 怎麼寫：短字層 → 標題／按鈕等既有元件規則（多為置中）。內文層 → 在該頁
body.頁面類名底下對段落p（或該區section內p）設text-align: left；欄寬可max-width+margin-inline: auto，但字仍左對齊。禁止在規則檔或新頁面把內文層綁死在自創 class 名上當唯一依據。 - 捲軸：一般區塊 不要出現內嵌捲軸（避免預設
overflow: auto/scroll把版面變成「盒子裡再拖條」）；只有站主對該區曾明講要可捲動或強烈規定的例外才做捲動容器。 img／canvas：禁止object-fit: fill或強制width/height: 100%拉扁。預設用object-fit: contain（或max-width: 100%+height: auto），圖本體置中、維持比例；若為裁切式全版背景圖，可改用object-fit: cover+aspect-ratio，須明講。
實作時仍以「只改被點名範圍」為上；若要拉一套新 grid／卡片列，優先在本區父層加 class，避免為了對齊去改未點名的全站共用規則。