1-11. 歸納整理好記憶
RWD 設計方式
| NO | 說明 | 英文教學網 | 簡中教學網 |
|---|---|---|---|
| 1 | 寬高大小、邊界距離 ... 使用 ％ 百分比相對於所在的容器。 | ||
| 2 | 寬度大小、邊界距離 ... 使用 vw／ vh 相對於視窗寬度/高度的百分比。 | ||
| 3 | max-width 最大寬度／ min-width 最小寬度， 運用這二種限定式的協助。 | ||
| 4 | 使用 calc ( ) 計算的函數，可以 + - / * 計算不同的單位。 注意：運算符號的左右必須空格！ | w3schools | RUNOOB |
| 5 | calc( ) 計算函數可以搭配 min ( ) 函數，限定最小值。 | w3schools | RUNOOB |
| 6 | calc( ) 計算函數可以搭配 max ( ) 函數，限定最大值。 | w3schools | RUNOOB |
| 7 | 媒體查詢規則 @media 視窗寬度的限定條件。 |
w3schools w3schools |
RUNOOB RUNOOB |
設備參考資料：多看看、多了解
設計是為了給大眾查看的，設計者應該隨時要了解 [瀏覽器] 使用趨勢， 【桌機版】、 【含掌上設備版】。
設計版面時，應該要了解使用者的 [螢幕設備解析度]， 【桌機螢幕使用趨勢】、 【掌上設備螢幕使用趨勢】。
各式輸出設備多參考： 【screensiz.es】、 【手機屏幕尺寸大全】、 【Device Metrics】
CSS3 多媒體查詢
語法：
@media ( min-width : 480px ) {
body { background-color: lightgreen; }
}
@media ( min-width : 480px ) {
body { background-color: lightgreen; }
}
有關多媒體查詢範例 【參考範例結果】
| 【 這是桌機版本時的排版樣子 】 | 【 這是手機版本時的排版樣子 】 |
|---|---|
 |
 |
CSS3 多 Columns 排版
| 版本 | 屬性 | 說 明 |
|---|---|---|
| 3 | column-count | 將段落文章多 coloumn 排版。 參考【英文版】 【英文版】 【簡中版】 【簡中版】 |
| 3 | column-gap | 指定 column 與 column 之間的間隙。 參考【英文版】 【英文版】 【簡中版】 |
| 3 | column-rule | 相關 column 之間的邊框樣式。 參考【英文版】 【英文版】 【簡中版】 |
| 3 | column-width | 指定 column 的寬度。 參考【英文版】 【英文版】 【簡中版】 |
測試 column 的排版設定
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
----- 網頁中將一段文章以多欄方式呈現的需求並不常見。
----- 那麼，哪些地方是比較需要多欄式的排版呢？請看以下參考。
測試 column 的排版設定
- 項目清單文字-1
- 項目清單文字-2
- 項目清單文字-3
- 項目清單文字-4
- 項目清單文字-5
- 項目清單文字-6
- 項目清單文字-7
- 項目清單文字-8
- 項目清單文字-9
- 項目清單文字-10
- 項目清單文字-11
- 項目清單文字-12
- 項目清單文字-13
- 項目清單文字-14
- 項目清單文字-15
- 項目清單文字-16
- 項目清單文字-17
- 項目清單文字-18
- 項目清單文字-19
- 項目清單文字-20
- 項目清單文字-21
- 項目清單文字-22
- 項目清單文字-23
- 項目清單文字-24
- 項目清單文字-25
- 項目清單文字-26
- 項目清單文字-27
- 項目清單文字-28
- 項目清單文字-29
- 項目清單文字-30
CSS3 多 Columns 排版
綜合練習範例多看看、多練習CSS 單位 參考整理表
絕對式單位
| 單位 | 說明 | CSS3 |
|---|---|---|
| px | 像素 （原則上，還是要相對到 控制台 > 顯示器 > 顯示器解析度） |
相對式單位
| 單位 | 說明 | CSS3 |
|---|---|---|
| em | 相對於父層字體大小的倍數。 例如: 父層是24px, 子層設定 2em = 24px*2 = 48px。 |
|
| rem | 相對於 html 字體大小的倍數 (相當於瀏覽器的整體預設，預設是16px)。 例如: 設定 2rem = 16px*2 = 32px。 |
V |
| vw | viewpoint width, 相對於視窗寬度的百分比，例如: 設定 1vw = 視窗寬度的 1%。 | V |
| vh | viewpoint height, 相對於視窗高度的百分比，例如: 設定 1vh = 視窗高度的 1%。 | V |
| vmin | vw 和 vh 中較小的那個。 | V |
| vmax | vw 和 vh 中較大的那個。 | V |
| % | 相對父層的百分比例。 |
測試練習：em vs rem
參考測試結果相對距離的依據
原則上網頁上的元素物件的座標都是相對性的！
水平對齊置中的探討
有哪些類型哪些方法的水平置中 ??
垂直對齊置中的探討
有哪些類型哪些方法的垂直置中 ??
各種函數的加強認識
| 函數 | 說明 | CSS3 | w3schools | runoob | w3school |
|---|---|---|---|---|---|
| url() | 指定影像所在的路徑/檔名 | 英文 | 簡中 | 簡中 | |
| attr() | 返回所選元素的屬性值 | 英文 | 簡中 | 簡中 | |
| rgb() | 使用紅-綠-藍模型（RGB）定義顏色 | 英文 | 簡中 | 簡中 | |
| rgba() | 使用紅-綠-藍-阿爾法模型（RGBA）定義顏色 | V | 英文 | 簡中 | 簡中 |
| hsl() | 使用色相-飽和度-亮度模型（HSL）定義顏色 | V | 英文 | 簡中 | 簡中 |
| hsla() | 使用色相-飽和度-亮度-阿爾法模型（HSLA）定義顏色 | V | 英文 | 簡中 | 簡中 |
| linear-gradient() | 將線性漸變設置為背景圖像。定義至少兩種顏色（預設從上到下） | V | 英文 | 簡中 | 簡中 |
| radial-gradient() | 將徑向漸變（圓心向外放射性漸變）設置為背景圖像。定義至少兩種顏色（預設從中心到邊緣） | V | 英文 | 簡中 | 簡中 |
| conic-gradient() | 將圓錐漸變設置為背景圖像。定義至少兩種顏色（預設中心點順時針圍繞旋轉漸變） | V | 英文 | 簡中 | |
| repeating-linear-gradient() | 重複線性漸變 | V | 英文 | 簡中 | 簡中 |
| repeating-radial-gradient() | 重複徑向漸變（圓心向外放射性漸變） | V | 英文 | 簡中 | 簡中 |
| repeating-conic-gradient() | 重複圓錐漸變 | V | 英文 | 簡中 | |
| cubic-bezier() | 定義貝塞爾曲線，協助動畫的加減速 | V | 英文 | 簡中 | 簡中 |
| calc() | 允許執行計算來確定 CSS 的屬性值 | V | 英文 | 簡中 | 簡中 |
| var() | 使用自定義變數/屬性的值 | V | 英文 | 簡中 | 簡中 |
| max() | 從一組數值的表達式中選擇最大的值 | V | 英文 | 簡中 | |
| min() | 從一組數值的表達式中選擇最小的值 | V | 英文 | 簡中 |