跟著KP用21天征服Responsive Layout-W1-使用max-width

這周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，就能讓元素擁有像海綿寶寶一樣伸縮自如，但又不會將文字過度伸長而破壞可讀性。