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