響應式設計的5個CSS實用技巧

英文原文：5 Useful CSS Tricks for Responsive Design ，翻譯：Viven Chen

正如我在教程響應式Web設計三步走當中所講的，響應式的Web設計其實並不難，但是要讓元素在佈局切換時能夠平滑過渡就比較考驗技巧了。現在我分享在編碼時常用的五個CSS技巧並舉例說明。這些技巧都是使用簡單的CSS屬性，如min-width、max-width、overflow 和相對屬性值，但是這些屬性在響應式設計中發揮著很大的作用。

1. 響應式Video (demo)

響應式video的CSS技巧是由tjkdesign.com發現的。我之前的一篇文章介紹過它，你可以在這裡閱讀。響應式視訊會適應它的容器寬度。

2. Min & Max Width (demo)

屬性設定了元素的最大寬度。其目的是防止元素“越線”。

最大寬度容器

在下面的例子當中，我定義了container的寬度是800px（譯註：如果它的父容器不小於800px），但是不超過父容器的90%。

使用max-width:100% and height:auto，圖片能自適應父容器的寬度。

上述的CSS在IE7和IE9都能起作用，但是IE8不識別。可以使用width:auto來修復。你可以使用針對IE8的條件CSS，或者使用下面的IE hack：

Min-Width

相反，它設定了元素的最小寬度。在下面的例子裡面，min-width用來定義input的寬度，防止input被拉伸的時候變得過小。

3. 相對值 (demo) 響應式設計中，使用相對值可以簡化CSS和改善佈局。下面舉例說明。 相對Margin 下面的例子是評論列表，使用相對margin來設定。我用百分比的值而不用絕對的畫素值來隔開子列表。下面的截圖可以看到，如果用畫素來定義，子列表會變得越來越小。 相對字型大小 以相對值（如em或%）設定的字型、行高、外邊距可以被繼承。例如，只要簡單地更改父級元素的字型大小，那麼它的子元素的字型大小也能隨之改變。 相對內邊距 下面的截圖說明了相對的百分比邊距比絕對的固定畫素邊距更好。左邊的容器體現了使用畫素邊距的不平衡。右邊的容器則體現了對容器空間的充分利用。 4. Overflow:hidden Trick 技巧 (demo) 如我在之前的文章所說的，可以使用overflow屬性來清除浮動。這個技巧很實用。應用overflow:hidden，可以對上一個元素清除浮動，保證當前容器的內容能正常顯示。 5. Word-break (demo) 我之前也說過word-wrap 屬性。可以在強制長文字（如長URL連結）換行。