在前面的文章中，我們也學習了很多關於響應式的課程了，但是響應式css寫法還是有些技巧的，在這裡主要提一下，便於做專案的時候更加得心應手。響應式的web設計其實並不難，這些技巧都是使用簡單的css屬性，如min-width、max-width、overflow 和相對屬性值，但是這些屬性在響應式設計中發揮著很大的作用。我們具體看下一下5個例項吧：
1. 響應式video (demo)
.video
.video iframe,
.video object,
.video embed
2. min & max width (demo)
屬性設定了元素的最大寬度。其目的是防止元素「越線」。
最大寬度容器
在下面的例子當中，我定義了container的寬度是800px（譯註：如果它的父容器不小於800px），但是不超過父容器的90%。
.container
響應式
使用max-width:100% and height:auto，能自適應父容器的寬度。
img
上述的css在ie7和ie9都能起作用，但是ie8不識別。可以使用width:auto來修復。你可以使用針對ie8的條件css，或者使用下面的ie hack：
@media \0screen
}
min-width
相反，它設定了元素的最小寬度。在下面的例子裡面，min-width用來定義input的寬度，防止input被拉伸的時候變得過小。
3. 相對值 (demo)
響應式設計中，使用相對值可以簡化css和改善布局。下面舉例說明。
相對字型大小 以相對值（如em或%）設定的字型、行高、外邊距可以被繼承。例如，只要簡單地更改父級元素的字型大小，那麼它的子元素的字型大小也能隨之改變。
相對內邊距 下面的截圖說明了相對的百分比邊距比絕對的固定畫素邊距更好。左邊的容器體現了使用畫素邊距的不平衡。右邊的容器則體現了對容器空間的充分利用。
4. overflow:hidden trick 技巧 (demo)
如我在之前的文章所說的，可以使用overflow屬性來清除浮動。這個技巧很實用。應用overflow:hidden，可以對上乙個元素清除浮動，保證當前容器的內容能正常顯示。
5. word-break (demo)
我之前也說過word-wrap 屬性。可以在強制長文字（如長url鏈結）換行。
.break-word
5. 總結
掌握了響應式的基本知識和一些技巧，其他的基本都是一些細活了。
響應式設計的5個CSS實用技巧
正如我在教程響應式web設計三步走當中所講的，響應式的 web設計其實並不難，但是要讓元素在布局切換時能夠平滑過渡就比較考驗技巧了。現在我分享在編碼時常用的五個css技巧並舉例說明。這些技巧都是使用簡 單的css屬性，如min width max width overflow 和相對屬性值，但是這些...
css 響應式布局
響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...
CSS 響應式布局
學的太不仔細了，仰天默淚 media query 查詢 常見的屬性 基本語法 href link.css media only screen and max width 480px 先引入外部樣式表，media是css才有的屬性，只有在螢幕解析度小於或等於480px畫素的時候 才會這個外聯樣式才有效...