流體佈局：

什麼是流體佈局？

流體是採用了一些設定，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的載入

移動端有兩種設計方式：

全屏設計，在 PC 端和 PAD 平板也可以無縫瀏覽，但圖片卻會失真。

固屏設計、雖然會留有白邊，但圖片不會失真。

一般手機解析度最小的不會小於 320。

採用固屏設計，幾乎每一個body裡面的父標籤都必須加max-width: 6.4rem; 

<meta>標籤

一般會在head裡面增加如下標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> 
 

width=device-width//頁面大小螢幕等寬 

initial-scale=1.0//初始縮放比例，1.0 表示原始比例大小 

user-scalable=no//使用者是否可以縮放，這裡 no 表示不可以。

導航欄

採用全屏100%，position: fixed; top: 0; z-index: 9999;文字不宜太多，容易溢位。

採用單位rem，相對大小

html{
    font-size: 625%;
}

在html {}的 CSS 中設定 62.5%相當於 10px，在 Chrome 瀏覽器卻出現偏差。那麼統一解 決的方法就是設定 625%，預設是 100px，這樣達到全相容。 

佈局忽略邊框計算

div { box-sizing: border-box; }

頁尾和內容之間插入一個div，清除浮動。

.clearfix:after{

content:'';

display:block;

clear:both;

visibility:hidden;

}

媒體查詢

/*媒體查詢，大於 480px 小於 640px*/ 

@media (min-width: 480px) and (max-width: 640px) {
#tour h2 { font-size: .26rem; } 
#tour h3, #footer, #tour figure, 
#tour .info { font-size: .16rem; } 
}
 

其它主要改成百分比形式就可以了。

文字溢位

多行文字溢位，顯示省略號。

響應式佈局：

什麼是響應式佈局？

就是一個網站能夠相容多個終端，通過檢測裝置，根據不同的裝置採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，在不同的裝置上看上去是不一樣的，會隨著裝置的改變而改變展示樣式。

響應相容式CSS 部分，基本是 PC 端移植，並改為流體百分比。

響應相容式html部分，兩個樣式都寫上，通過媒體查詢，響應式隱藏即可。