RWD 環境建立

  • UTF-8 可避免文字變亂碼。
  • HTML 中 viewport 設定 ( 可譯為螢幕解析度的 CSS Reset )
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • name="viewport" 可把螢幕寬度都轉成裝置的寬度,就不會有內容不同步的問題
    • initial-scale=1.0 縮放比例為1
    • emmet 快捷鍵 meta:vp
    • width=device-width 瀏覽器顯示寬度 = 裝置寬度 ( 語意 : 把螢幕解析度強制變成載具寬度 )。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

RWD 佈局設定

預設字體

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}
  • 預設字體中包含 Mac 與 Windows 的系統字。
    • 電腦使用自己的系統字支援好、瀏覽性好、載入速度也會比較快。
  • 順序由左至右,電腦依序從左至右查詢支援的字體。
  • 字體名稱中間有空格需使用 " " 雙引號或 ‘ ‘ 單引號將它括起來,避免發生錯誤。
  • 一定要加上 sans-serif 無襯線字體,因為此字體是 Mac 與 Windows 都支援的字體,假設前方系統字都沒有,至少還有 sans-serif 可支援。

行高設定

  • 一般設計稿數值皆 8 的倍數。
  • 用倍數
    • 作業中的設計稿大概是接近下方兩個數值,如果沒有要各別設定,可統一做下方設定。
  • 會統一設定
/*一般會統一設定於此*/
body {
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

禁止開版開太大

實務上不會把版型開到 1920px 這麼大,設計稿中 1920px 只是方便設計師觀看滿版時的設計,
中間的容器大部分都會在 1000 ~ 1280px 左右。

禁止顯示 X 軸

  • 加入 max-width 可避免產生 X 軸。可自適應瀏覽器寬度。

CSS Reset – 圖片與盒模型

可加入 CSS Reset 中

  1. 全域 border-box
  2. RWD img CSS
    • 圖片可保留原本寬高,但父層隨螢幕解析度伸縮時也會跟著伸縮。
*,*::before,*::after{
  box-sizing: border-box;
}
img{
    max-width:100%;
    height:auto;
}

斷點設計

#01. 新手斷點設計

可先嘗試設這兩個斷點 : 767px 與 992px。

  • 993px 以上為桌機版、768px ~ 992px 為 ipad 版型、767px 以下為手機版型。

2020六角秋季切版班-3課堂筆記01

// 圖片來源 : 六角學院 ▲

#02. 常用斷點設計

  • 992px、768px、375px

#03. 斷點通常為 3 ~ 5 個,不宜超過 8 ~ 10 個以上。 ( BS 為 5 個斷點 )

RWD 使用 Flex 多排變少排時的變換方式

Codepen 範例

  • 不太規則的 RWD 排版常用改變軸線 ,較規則的常使用 wrap。
    • 不規則的排版,斷點轉換時可做 flex-direction 的轉換 ( 水平變垂直 or 垂直變水平 )。
      • 上方範例中 .headder 內排版。
  • 規則的版型。例如 : 商品列表寬度都很規律,可直接在桌機斷點使用 wrap 斷行,桌機版以下的斷點進行寬度設定時,超出父層的區域會自動排列到下行,就不需要再改變軸線。
    • 上方範例中 .main 內排版。

寬度百分比 % 介紹

% 是看父層的寬度做自適應。

  • 不會所有元素的寬 度都使用 % 。通常用於大佈局,例如左選單、右選單 .. 等,寬度會使用 %。或者容器內裡面的小元件、小 icon 等,有時候會寫死寬度 & 用 %。

Q1. .menu.content 寬度為多少 ?

Ans : .menu 為 30px 、.content 為 65px。

子層會以父層寬度為基準去自適應百分比。

<body>
    <div class="container">
        <div class="menu"></div>
        <div class="content"></div>
    </div>   
</body>
.container{
    display:flex;
    width:100px;
    margin:0 auto;
}
.menu{
    width:30%;
    margin-right:50%;
    background:orange;
    height:100px;
}
.content{
    width:65%;
    background:blue;
    height:100px;
}

註 : 如果 .menu.content 的父層 .container 沒有下寬度,那它們的父層 .container 就會再往上找它的父層,繼承它的寬度做自適應,也就是 body 瀏覽器寬度。

max-width:100%;

  • 子層會繼承父層設定,所以不用特地在 .containermax-width:100%;
<body>
    <div class="container">
        <div class="menu"></div>
        <div class="content"></div>
    </div>   
</body>

Media Queries 語法

@media(max-width:768px){} /*螢幕於768以下觸發 - 用於桌機寫到手機 */
@media(min-width:768px){} /*螢幕於768以上觸發 - 用於小解析度寫到桌機*/

權重

先看權重,再看先後

  • 任何元素選擇符 * : 0 分 ,沒有權級。
  • HTML 標籤 ( 元素選擇器 )、偽元素選擇器:1 分。
    • h1pulli 等。
  • class 選擇器、偽類選擇器:10 分。
    • .title ,前方以點開頭。
  • ID 選擇器:100 分。
    • #title ,前方以 # 開頭。
    • 因為 ID 選擇器權重較高為 100 分,在寫文件會有樣式覆蓋上的麻煩,所以不建議於 CSS 使用,除非 js 操作。
  • inline style:1000 分。
    • <h1 style=" ">title</h1> ,直接在 HTML 標籤內寫 style。
  • !important:10000 分。
    • .title2{ color:red; } !important

Q1. h1 文字顏色為 ?

<h1 class="title title2">TITLE</h1> 
.title2{
    color:red;
}
.title{
    color:blue;
}

Ans 1. 藍色

這邊不管 HTML 的先後順序,以 CSS 先後順序為優先。

Q2. 螢幕解析度在 769px 時,h1 文字顏色為 ?

Q3. 螢幕解析度在 568px 時,h1 文字顏色為 ?

Q4. 螢幕解析度在 320px 時,幾個 .title 會被開啟 ?

<h1 class="title">TITLE</h1> 
.title{
    color:red;
}
@media(max-width:768px{
    .title{
        color:blue;
    }
}
@media(max-width:375px{
    .title{
        color:yellow;
    }
}

Ans 2. 紅色

Ans 3. 藍色

Ans 4. 三個 .title 都會被開啟,只是上方第一個與第二個會被 @media(max-width:375px{ } 的覆蓋掉。

2020六角秋季切版班-3課堂筆記02

// 圖片來源 : 六角學院 ▲

Q5. h1 文字顏色為 ?

<h1 class="title">TITLE</h1> 
.title{
    color:red;
}
h1{
    color:blue;
}

Ans 4. 紅色

先看權重再看先後, HTML 權重 1 分 <  class 選擇器 10分

Q6. 權重分數運算

  • .title h1 {} → 10+1=11 ( class 選擇器 + HTML 標籤 )
  • .qa-lost__title-link → 10 ( class 選擇器 )
  • #Stencil .Pos-r→ 100+10=110 ( ID 選擇器 + class 選擇器 )
  • #atomic .Py , #atomic .Pt → 100+10=110 ( 逗號不會有加分作用; ID 選擇器 + class 選擇器 )
  • .on_sale li a , .sale_category li a , .sale_news li a → 10+1+1=12 ( class 選擇器 + HTML 標籤 + HTML 標籤 )
  • 眾多一分的權重是會壓過一個十分的權重的。
    • .h2 .h2 .h2 .h2 .h2 .h2 .h2 .h2 .h2 .h2 > .h2

Q. 根據以下 CSS,在螢幕解析度 600px 時文字的顏色為何 ? 出處 – 11/3 每日任務

A. 紅色 B. 黑色 C. 黃色 D. 藍色

@media (min-width: 576px){
    p { 
        color: red;
    }
}
@media (min-width: 768px){
    p { 
        color: black; 
    }
}
p { color: yellow; }

Ans. C 黃色

先看權重再看先後,上方權重皆為 1 ,所以後方的 p 會覆蓋掉斷點中的 p 設定。

實例 : CSS 框架樣式覆蓋的處理方式

先看權重再看先後

專案中要覆蓋前輩的樣式但又不能直接做修改,可於最後方置入自己的 all.css,在裡面寫入要修改的樣式做覆蓋。

2020六角秋季切版班-3課堂筆記03

// 圖片出處 : 六角學院 ▲

Adobe XD 設計稿說明

設計稿布局網格

於設計稿右方 " 布局網格 " 中開啟效果。

內容寬度運算方式 :

列寬 65 x 列 12 + 間隔寬度 30 x 11 = 1110 px ( 通常就會抓 1110px 為開版尺寸 )

2020六角秋季切版班-3課堂筆記04

文字行高問題

  • 多行文字,依右方樣式內提供的行高為準。
  • 單行文字,依點選文字出現的字高為行高。
  • 切版時可以先檢視是單行文字還是多行文字,再來判斷要看區塊高的數值,還是行高的數值。

2020六角秋季切版班-3課堂筆記05

2020六角秋季切版班-3課堂筆記06

why ? ( 出處 : 六角設計師 Joanne )

XD 的文本設定分成三種(對他又更新了,
現在分成 Auto Width、Auto Height、Fixed Size
其中 Fixed Size 就像更新前的 Area Text
Auto Width、Auto Height 則是像之前 Point Text 的細分版
這邊為了方便講解我們就用更新前的兩種版本來說

Point Text 會自動生成區塊高度,但並不等於行高,Area Text 則是手動設定行高與區塊高。
若要有正確行高就需使用 Area Text,但使用 Area Text 有一個問題,這邊請參考圖片
在 XD 中,不同的字型在設定行高後的結果不一定會相同(附圖 1)
而若旁邊有 Icon 要置中對齊,在視覺上便會產生誤差值(附圖 2)
因此我們在「單行文字」會優先使用 Point Text 設計,維持視覺上的平衡哦 !

2020六角秋季切版班-3課堂筆記07

// 附圖 1 ( 圖片來源 : 六角學院 ) ▲

2020六角秋季切版班-3課堂筆記08

// 附圖 2 ( 圖片來源 : 六角學院 ) ▲

選擇器中間符號不同的差異

  • 選擇器中間符號不同的差異 [技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白或逗號
      1. .b.c 中間沒有空格,表示此區塊需要同時具有 .b 與 .c 的 class 才能被 CSS 所選擇到到。
      2. .b , .c 中間以逗號間隔,表示 class 中有 .b 或 .c,都會被編輯器所選擇到。
      3. .b .c 中間空格分開,表示必須要是在 .b 裡面的 .c,才會被選擇到。

課堂問題

Q1. 設計稿中提供 2x 跟 x 兩種尺寸圖片的選擇因應辦法

Ans 1 :

  • 可使用一張高解析度的圖片做共用。
  • 圖片建議使用線上壓縮軟體做壓縮。 Tinyjpg

Q2. 實做時,在模擬器上看是好的,手機看卻有些微跑版,該怎麼修改 ?

Ans 2 : 可搜尋關鍵字 『 remote rwd safari device 』、利用 Chrome 對 iOS 進行除錯。

資料來源

六角學院 :

文章 :

最後修改日期: 28 12 月, 2020

作者