用 CSS 最大、最小寬度設定的語法實現 RWD 排版

　　在 RWD 設計當中，很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版（格線系統）可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做，而是自己撰寫 CSS 的話，或許可以試著用設定最大或最小寬度來完成自適應。

令元素的最大寬度不超過所設定的數值

　　通常是運用在大螢幕上，避免元素佔滿版，降低使用者體驗。

　　以圖片為例，通常會先設定 width:100% 以填滿容器，在手機裝置上看因為螢幕小沒有問題，但換到 1280px 的電腦螢幕上，圖就會跟著變成 1280px 寬，直接佔滿整個螢幕看起來非常難看，這個時候再設定 max-width:500px，這樣就可以讓圖片在超過 500px 寬的螢幕上維持500px的寬度，不會再變得更大。

可使用的語法：

• max-width：設定元素最大寬度
• width: min(n,m)：在當前條件下，選則最小的數值來套用。例如：min(100%, 500px)
• • 螢幕小於500px - width套用100%，寬度隨螢幕大小調整。
• • 螢幕大於500px - 因套用100%會導致width大於500，因此套用數值更小的500px。

令元素的最小寬度不超過所設定的數值

　　目前想到的例子是可運用在多欄位的排版上。

　　有時候在大螢幕上希望這個版面可以排出四個欄位，於是幫容器內的子元素們設定寬度25%，結果在螢幕或頁面縮小時，容器們直接跟著被壓縮。這時候只要設定子元素的最小寬度，就可以避免被過度壓縮，並自動跳行。

可使用的語法：

• min-width：設定元素最小寬度
• width: min(n,m)：在當前條件下，選則最大的數值來套用。例如：man(25%, 300px)
• • 螢幕大於1200px - width套用25%，寬度隨螢幕大小調整。
• • 螢幕小於1200px - 因套用25%會導致width小於300，因此套用數值更大的300px。