為什麼你應該要經常設定 max-width？讓網站更好看的前端技巧

不知道你有沒有注意過這個問題，在你使用大螢幕看某些網站時，他的文字會被拉的很長？請參考我之前看到的超長 cookie banner 👇

這個時候就可以輕鬆用 max-width 解決問題，今天分享三個我經常使用 max-width 的三個小技巧。往下看看吧！

三個常用 max-width 的場景

一、放在文章頁面

一個最簡單常用的方式就是在整個 section 加上 max-width，限制 section 的寬度，以我的部落格文章頁面當作範例，不管螢幕多大，文章都會限制在一個寬度內，閱讀起來比較容易。

若是沒有加上 max-width，寬度會變超寬，閱讀起來就會很不舒服。

二、用在特定元素的設計

有時候為了讓整體比例更好看，會將某些文字段落設定 max-width，以下面這個當作例子，在有設定 max-width 時文字會分長多行，設計上較有呼吸感。

若是我們把 max-width 去掉就會讓文字變很長，比例變得很奇怪，如下：

三、保持圖片自身大小

這算是比較冷門一點的應用，如果你不希望圖片超過自身的大小而影響畫質，就可在圖片上設定 max-width，我之前有寫一篇文章，可以去參考看看～

小結

雖然 max-width 只是一個小細節，不添加也不影響功能，但用好卻能大大增加閱讀體驗或讓設計比例更好看，下次做網站時用用看吧！