1.浮動+百分比布局
2.fiex布局 flex布局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變
responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使**在手機和平板電腦上有更好的瀏覽閱讀體驗。螢幕尺寸不一樣展示給使用者的網頁內容也不一樣，我們利用**查詢可以檢測到螢幕的尺寸（主要檢測寬度），並設定不同的css樣式，就可以實現響應式的布局。
我們利用響應式布局可以滿足不同尺寸的終端裝置非常完美的展現網頁內容，使得使用者體驗得到了很大的提公升，但是為了實現這一目的我們不得不利用**查詢寫很多冗餘的**，使整體網頁的體積變大，應用在移動裝置上就會帶來嚴重的效能問題。
響應式開發的原理：**查詢：
查詢媒介，查詢到當前螢幕(媒介**)的寬度，針對不同的螢幕寬度設定不同的樣式來適應不同螢幕。簡單說，你可以設定 不同螢幕下面的不同的樣式，達到適配不同的螢幕的目的。
實現方式：通過查詢screen的寬度來指定某個寬度區間的網頁布局。也可以使用all就是所有還有就是可以針對於列印print
css 語法
@media **型別{ 框架Bootstrap實現響應式布局
前端開發的框架bootstrap，響應式布局 定義行。相當於之前的tr 樣式 row 定義元素。指定該元素在不同的裝置上，所佔的格仔數目。樣式 col 裝置代號 格仔數目 柵格div class col lg 1 col sm 2 inner 柵格div class col lg 1 col sm ...
響應式前端框架Bootstrap系列（13）進度條
進度條使用 css3 過渡和動畫來獲得該效果。internet explorer 9 及之前的版本和舊版的 firefox 不支援該特性，opera 12 不支援動畫。進度條的顏色樣式有以下幾種 progress bar success progress bar info progress bar ...
fcc 響應式框架Bootstrap 練習1
bootstrap 按鈕顏色有 7種，對應的class為 btn,白色 btn btn primary,深藍色 btn btn info,淺藍色 btn btn success,綠色 btn btn warning，黃色 btn btn danger,紅色 btn btn inverse黑色 del...