切版眉角：先分析設計稿，再切版

7 min readJul 15, 2021

以六角學院直播切版課第一週作業-助教筆記整理與編輯重點

🌟檢視重點：找共同設定 - 文字、顏色、間距

文字：字體、行高、大小

✅預設字體

❗順序：英文字型 > Linux系統 > Mac系統 > Windows > 基礎字體
如果中文字型在前，那麼網頁可能會讀取不到英文的字體，
所以用越少的放前面

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;                                         
}

-apple-system：mac, IOS 系統字體(Chrome)
BlinkMacSystemFont：mac, IOS 系統字體(Safari)
"Segoe UI"：Windows 英文系統字
"Microsoft JhengHei"：微軟正黑體
Roboto：Android 系統字
"Helvetica Neue"： IOS 系統字
Arial, sans-serif：通用字體

💡一定要加雙引號” ”才不會因為字體中間的空白有讀取問題

▪ 系統字體介紹
▪ font-family 詳細解說
▪ 如何使用 Google Fonts
▪ CSS 設定中英文不同的問題
▪ CSS 網頁字型 @font-face 使用教學與範例 — G. T. Wang
▪ 補充設計稿上的用法：font

✅行高（元素高、字行高）常見設定方法

▪ 用倍數
▪ 只會統一設定在以下地方

body { 
  line-height: 1.5;
 /* 16*1.5=24px */
}h1, h2, h3, h4, h5, h6 {
  line-height: 1.2; 
}

💡瀏覽器font-size: 16px是預設

✅大小

❗h1 和 .h1 的差別：
標題標籤有自己的語意，所以使用時是⭐看語意 而不是字體大小

<h2 class="h2"></h2>

h1➡最重要的主標題,如網站名稱
h2➡次重要的次標,項目標題：如個人資料、學歷、工作經驗
h3➡第三重要 …

✏通常標題標籤的設定方式：

.h1{
    font-size: 48px;
}
.h2{
    font-size: 32px;
}
.h3{
    font-size: ...
}
.h4{
    font-size: ...
}
.h5{
    fonst-size: ...
}
.h6{
    font-size:16px; ...
}💡不建議再繼續寫 h7~~

✏推薦另外一種設定方式：

.font-sm{
    font-size:
}
.font-m{
    font-size:
}
.font-lg{
    font-size:
}

✏不是共用的大小建議直接寫在區塊 class 內

.title{
    font-size: 80px;
    ....
}

❗px 和 rem： rem 準取決於最外層( body )的 font-size

body{
    font-size: 16px;
}
.h1{
    font-size: 3rem;
}

從上面程式碼來看
最外層 body 看 font-size: 16px ➡表示：1rem = 16px
( ⭐最外層一定要用px -為rem的預設值 )
.h1{ font-size: 3rem } ➡ 表示：font-size=3*16= 48px

💡為什麼要用 rem?
通常設計師會使用倍數(8倍)去設定字級(字的大小)，
如果寫成 rem 會有倍數關係，且容易變動！

色彩

✅找出主色(明暗變化)、強調色(次要色、重要、執行關鍵)

▪ primary ➡ 主色（如第一週設計稿主色是黑色，可不用設定）
▪ secondary ➡ 次要色
▪ warning ➡ 警告（通常黃色）
▪ danger ➡ 危險、通常用於刪除（通常紅色）
▪ light ➡（通常灰白）

.text-primary {
   color: purple;
}
.bg-light{
   background-color: lightblue;
}

間距

▪ 元件之間 ( 8、16 )
▪ 元件與外層元件 ( 24 )
▪ 區塊與區塊間距 ( 72 )

m - margin 
p - padding 
t - top 
b - bottom margin-bottom = mb

✏ 命名 使用數值

.mb-8{
    margin-bottom: 8px;
}

壞處：要改數字的時候需連同 class 名稱一起改

✏ 命名 使用倍數

.mb-1{
    margin-bottom: 8px;
}

共同設定

*, *::before, *::after{
 box-sizing: border-box;
}
body {
 font-size: 16px;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
 line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
 line-height: 1.2;
}大小.h1{
 font-size: 80px;(5rem)
 line-height: 106px;
}
.h2{
 font-size: 32px;
 line-height: 106px;
}色彩.text-secondary {
   color: ...;
}間距
.mb-4 {
   margin-bottom: 72px;(4.5rem)
}

💡box-sizing: border-box; 讓border、padding不算進去容器的寬高裡面

box-sizing 影音
 偽類和偽元素

🌟CSS 模組化

💡只用一次的不需要模組化

命名請完整

ex: .tac➡ .text-center,
.c-wh ➡ .text-white,
.d-fl ➡ .d-flex,
.d-inli ➡ .d-inline

不要用

流水號sec1, sec2, img1, img2、
方向 top, middle, bottom → profile, skills …

💡要語意化，讓自己十年後都看得懂！
Bootstrap utils 命名

🌟如何做到 1 px 也不差？

文字行高＋字體大小+字型
間距
box-sizing: border-box (內容寬高可不包含 padding, border)

練習：pixel perfect kata

💡注意：圖片空隙

🌟container

什麼是 container？將最重要的內容放在畫面中間（像是一個容器）

.container {
        width: ...px;
        margin: 0 auto;
    }

💡怎麼算出容器寬度？ — 看設計稿的佈局網格
算法有兩種：

1.看XD的佈局網格顯示多少去算：
列：72
間隔寬度：24
列寬78
12*78 + 24*11 = 1200px

2.看左右兩邊距離中間多少：
1920–360*2(左右邊距離中間內容) = 1200px

container & wrap 差別在哪？

<div class="wrap">
    <div class="profile">
        <div class="container">
            <h2>...</h2>
        </div>
    </div>
     ....
</div>

💡如要用section 裡面一定要放標題

<div class="wrap">
    <section class="profile">
        <div class="container">
            <h2>...</h2>
        </div>
    </section>
     ....
</div>

第一週常見問題：

推擠方向要一致
第一週用不到 flex
設計稿上的資訊不一定是正確的
XD匯出的程式碼會有許多多餘的預設等等