方案一：百分比布局(流式布局，就是百分比布局，也稱為非固定畫素布局)
利用對屬性設定百分比來布局，這裡的百分比布局是相對應父元素；能夠設定的屬性有width、height、margin、padding，其他屬性border、font-size（不能使用百分比，只能使用px）不能用百分比設定
2.導航欄是利用設定單欄 width:25%來設定不同的解析度。
3.由於沒辦法對font-size進行百分比設定，所有最多還是使用在整個頁面布局和上面。
方案二：使用**查詢(css3 @media 查詢)
利用**查詢設定不同解析度下的css樣式，來設配不同螢幕。
注意：ie6、7、8不支援**查詢。
方案三：rem響應式布局
當前頁面中元素的rem單位的樣式值都是針對於html元素的font-size的值進行動態計算的，所以有兩種方式可以達到適應不同螢幕：
第一種利用**查詢，在不同解析度下給html的fotn-size賦值。
第二種利用js動態計算賦值
缺點：開啟頁面時候，元素大小會有乙個變化過程。
方案四：vw、vh響應式布局
根據psd檔案寬度或高度作為標準，元素單位px轉換成vw或vh，比如font-size:12px，psd檔案寬度375，轉換公式12*100/375，則樣式為font-size:3.2vw
rem:相對長度單位。相對於根元素(即html元素)font-size計算值的倍數;
vw:相對於視口的寬度。視口被均分為100單位的vw;
vh:相對於視口的高度。視口被均分為100單位的vh;
vmax:相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax;
vmin:相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;
方案五：felx彈性盒子布局
利用flex資料來適應不同螢幕
flex-direction屬性：決定主軸的方向（即專案的排列方向）;
flex-wrap屬性：規定如果一條軸線排不下，如何換行；
flex-flow屬性：是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row/no-wrap；
justify-content屬性：定義了專案在主軸上的對齊方式；
align-items屬性：定義專案在交叉軸上如何對齊；
align-content屬性：定義了多根軸線的對齊方式；
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畫素的時候 才會這個外聯樣式才有效...
css 響應式布局
一.使用html中的viewport來實現 viewport語法如下 html 1 width 控制 viewport 的大小，可以指定的乙個值或者特殊的值，如 device width 為裝置的寬度 單位為縮放為 100 時的 css 的畫素 2 height 和 width 相對應，指定高度。3...