正如我在教程響應式web設計三步走當中所講的，響應式的 web設計其實並不難，但是要讓元素在布局切換時能夠平滑過渡就比較考驗技巧了。現在我分享在編碼時常用的五個css技巧並舉例說明。這些技巧都是使用簡 單的css屬性，如min-width、max-width、overflow 和相對屬性值，但是這些屬性在響應式設計中發揮著很大的作用。
1屬性設定了元素的最大寬度。其目的是防止元素「越線」。.video 78
.video iframe,
9.video object,
10.video embed
最大寬度容器
在下面的例子當中，我定義了container的寬度是800px（譯註：如果它的父容器不小於800px），但是不超過父容器的90%（如果它的父容器小於800px）。
.container響應式使用max-width:100% 和 height:auto，能自適應父容器的寬度。
img上述的css在ie7和ie9都能起作用，但是ie8不識別。可以使用width:auto來修復。你可以使用針對ie8的條件css，或者使用下面的ie hack：
@media screen }min-width
相反，它設定了元素的最小寬度。在下面的例子裡面，min-width用來定義input的寬度，防止input被拉伸的時候變得過小。
響應式設計中，使用相對值可以簡化css和改善布局。下面舉例說明。
相對margin
相對字型大小
以相對值（如em或%）設定的字型、行高、外邊距可以被繼承。例如，只要簡單地更改父級元素的字型大小，那麼它的子元素的字型大小也能隨之改變。
相對內邊距
下面的截圖說明了相對的百分比邊距比絕對的固定畫素邊距更好。左邊的容器體現了使用畫素邊距的不平衡。右邊的容器則體現了對容器空間的充分利用。
我之前也說過word-wrap 屬性。可以在強制長文字（如長url鏈結）換行。
.break-word
實現響應式布局的5個CSS實用技巧
在前面的文章中，我們也學習了很多關於響應式的課程了，但是響應式css寫法還是有些技巧的，在這裡主要提一下，便於做專案的時候更加得心應手。響應式的web設計其實並不難，這些技巧都是使用簡單的css屬性，如min width max width overflow 和相對屬性值，但是這些屬性在響應式設計中...
用於響應式設計的9個CSS技巧
發表於 2013 04 03 09 31 smashinghub ali qayyum 前端開發 css響應式設計 css已成為web發展不可或缺的部分，開發人員可以使用它來改變網頁元素的樣式。而隨著響應式設計越來越流行，css在響應式設計中已扮演著舉足輕重的角色，在進行響應式設計時，倘若你能掌握一...
用於響應式設計的9個CSS技巧
1.取消下劃線 現在越來越多的 文字鏈結已取消下劃線，而這已成為一種web設計趨勢，尤其是在做響應式 時。下面提供一段簡單的css 可以輕鬆取消文字鏈結下劃線 video.video iframe,video object,videoembed 3.rollover文字鏈結越來越多的人喜歡在手機上瀏...