WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-12. CSS 新增功能與範例再學習 (依需求挑選學習)

整理 RWD 的設計方式

說明 英文教學網 簡中教學網
寬高大小、邊界距離 ... 使用 百分比相對於所在的容器。    
寬度大小、邊界距離 ... 使用 vwvh 相對於視窗寬度/高度的百分比。    
max-width 最大寬度/ min-width 最小寬度, 運用這二種限定式的協助。    
使用 calc ( ) 計算的函數,可以 + - / * 計算不同的單位。
注意:運算符號的左右必須空格!
w3schools RUNOOB
calc( ) 計算函數可以搭配 min ( ) 函數,限定最小值。 w3schools RUNOOB
calc( ) 計算函數可以搭配 max ( ) 函數,限定最大值。 w3schools RUNOOB
媒體查詢規則 @media 視窗寬度的限定條件。 w3schools
w3schools
RUNOOB
RUNOOB
go TOP