這周KP分享的第三個概念是max-width，我們在甚麼狀況下會使用它。
情境:電腦版的文字太長，而缺乏可讀性。
在前面學到了對width設置百分比後，我們常會用以下的方式來設計個container，來達成內容置中，左右留白，內容佔螢幕85%(你想佔百分之幾都可以)的效果。
.container{
width:85%;
margin: 0 auto;
}
這樣看起來很美好，對吧?
但是如果你用桌機來看，結果就是會像這樣.....
我相信還是有蠻多人覺得也蠻ok的。怎麼了??
好吧，有時候我們真的會比較沒有設計的sense。但是公司裡的設計師或資深的前端前輩會跟你說，這樣的文字區塊太長了，使用者在閱讀的體驗上不太好。
好吧，sense這個東西真的很難表達，那我們就用個實際例子來比較吧。
方格子的介面
可以注意到，方格子的文字長度不長。讓這個區塊看起來不像是電腦的橫向螢幕，反而較像是手機以及書本的直向模式。
使用max-width來避免文字過長
這時候max-width就要登場
.container{
width:85%;
max-width:800px; /*只要加上max-width*/
margin: 0 auto;
}
max-width能夠給container設定伸長的上限800px，這樣文字就不會在大銀幕中延伸太長而破壞了可讀性。
這裡我們來看使用max-width前後的差異
Before
After
總結
這就是這第一周最後的內容 max-width,只要使用百分比width搭配max-width，就能讓元素擁有像海綿寶寶一樣伸縮自如，但又不會將文字過度伸長而破壞可讀性。
