# RWD (下) ###### tags: `RWD` ## 1.max-width & min-width & min-height & max-height 給予該標籤在螢幕最大的寬度(高度)&最小的寬度(高度)，將一個物件的「尺寸限制在一個區段範圍內」 ```=CSS max-width:1000px; min-width:200px; ``` ### 給予圖片最大寬度 由於給予 div 等容器最大寬度，但當圖片寬度>該容器最大寬度時，圖片會超出該容器寬度，所以要給與圖片寬度一個限制 ```=CSS img{ max-width:100%; height:auto; } ``` ### 複雜的關係 **情境1: 如果有一個物件的CSS設定 max-width 小於 min-width** ```=CSS max-width:100px; min-width:300px; ``` <font color="red">解答</font>: 答案是該物件的寬度會是 300px ， 直接宣布 max-width 是無效的 ， 讓內容可以至少放進該物件裡面，所以 min-width 的優先權會大於 max-width --- **情境2: 如果有一個物件的CSS設定 width 小於 min-width** ```=CSS width:100px; min-width:300px; ``` <font color="red">解答</font>: 答案是該物件的寬度會是 300px ， 由於 width 小於 min-width ， 但是 min-width 表示最小寬度範圍，所以會是 min-width 勝出 --- **情境3: 如果有一個物件的CSS設定 三種寬度大亂鬥** ```=CSS width: 300px; min-width: 200px; max-width: 100px; ``` <font color="red">解答</font>: 答案是該物件的寬度會是 200px ， 其實這時候 max-width 產生作用了，但卻不是 100px，而是 max-width 與 min-width 計算後得到的結果，以內容能撐開的最小寬度為主 ## 2.RWD使用技巧 多用%來做 %會依照目前鎖定的範圍給予固定百分比的空間，為不同的版型給予不同的比例 目的: 再縮放網頁的同時，不會受到固定寬度影響，讓網頁整著走板 ex: div=1000px div裡面的div.title為20%，所以div.title的空間為200px ## 參考資料 [min-width & max-width - 金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10252194)