防禦性 CSS
https://ishadeed.com/article/defensive-css/
flex換行
使用 flexbox 時的一般經驗法則是允許包裝，除非您想要滾動包裝。那是另一回事，但盡量使用flex-wrap以避免意外的佈局行為（在我們的例子中是水平滾動）。
組件添加間距
文本離操作按鈕太近了嗎？您可能正在考慮多行換行，但我將在另一節中討論。現在，讓我們關注間距。
長內容
在這樣的佈局中，一致性很重要。為了實現這一點，我們可以簡單地通過 usingtext-overflow來截斷名稱。
防止圖像被拉伸或壓縮
最簡單的解決方法是使用 CSS object-fit。
鎖定滾動鏈接
添加overscroll-behavior-y: contain;到任何需要滾動的組件（例如：聊天組件、移動菜單等），這個屬性的好處是它在滾動之前不會產生影響。
垂直媒體查詢
開發人員添加position: sticky了輔助導航，以便它可以貼在底部，需要通過使用 CSS 垂直媒體查詢，我們可以避免這個問題。
滾動條裝訂線
當內容因顯示滾動條而變長時如何移動。我們可以通過使用scrollbar-gutter屬性來避免這種行為。
#防禦性, CSS
留言
張貼留言