pc端有適配的需求：目前我們pc專案的設計稿尺寸是寬度1920，高度最小是1080。

適配目標：

1.在不同解析度的電腦上，網頁可以正常顯示

2.放大或者縮小螢幕，網頁可以正常顯示

對於寬度的適配

對於寬度適配：

首先設定html,body{width:100%;overflow-x:hidden;}

然後我們可以把頁面分解為背景層(一般寬度都會大於1200px)和內容層(一般寬度都會小於1200px)，對於背景層，我們一般都要求完全鋪開，主要有以下幾種情況：

1.背景色為純色：我們可以直接.box{background:#fff；width：100%；}則可以鋪滿

2.背景設定為背景圖片：

我們有情況用.box{background: #fff url(images/01.png) no-repeat center center;width:100%;height:100px;}

有的情況需要用：.box{background: url(images/01.png) repeat left center;width:100%;height:100px;}

對於內容層我們保證我們的內容都封裝在盒子內，然後margin:0 auto;保持居中顯示，盒子裡面的內容，我們再另外調整

對於高度的適配

一般情況下，頁面都比較高，我們通過給每個模組設定具體的高度值來做頁面，然後頁面會出現導航條，我們可以拉動導航條來瀏覽，但是有的頁面的需求是主體內容直接在不同的瀏覽器上都能完整顯示，不通過導航條來瀏覽

如何做？

1、百分比的應用

百分比的應用在於主視角的定位和縮放，百分比的取值以原設計稿的尺寸為標準。什麼意思呢？舉個栗子，一個元素在原設計稿裡，量出來距離頂部是 200px，如果寫死可能是top:200px 或者margin-top:200px,現在要轉成百分比，那麼這個值可能就是23.3%。這個值怎麼算？如果設計稿是 1080，200/1080=18.51%這樣計算出來百分比的值。

但是，有個地方要注意，流體佈局下，百分比的值是根據父層計算的；absolute佈局的元素是根據最近的relative父層計算的；fixed佈局的元素是根據window的可視區域計算的。

所以，如果要達到適配的效果，不只是當前元素需要用百分比值，其參考計算的元素也是要動態變化的。

另 外還有一個就是圖片縮放的問題，pc很多主視角都是切圖的，但是pc不能直接用background-size（雖然強大的filter相容可以使低版本 ie支援，但是之前說過用filter都要特別小心，特別是涉及到js互動操作的，很多坑）。在pc我們可以直接通過img標籤來插入圖片，通過設定 img寬度為100%，高度auto，然後讓它根據父層來等比縮放來實現（img標籤實現縮放引起的另一個問題是該圖片不能用雪碧圖了，但pc的主視角不 是很多，影響不大）。

2、js監測

需要js主要有兩個原因：

上面說了，百分比是要有父層做參照物的，那麼如果父層都用百分比，那就是最終是根據window來參照的，因為pc絕大部分都是寬屏裝置，而且他們的比例是不一致的，我們來計算下(190是減去瀏覽器工具條、window桌面條、我們頁面通用頂條)：

設計稿：1920/(1080-190) = 2.16

14寸普通筆記本：1366/(768-190) = 2.36

所以，我們不能寬高都100%按照螢幕尺寸來計算。另外考慮到主要是高度對pc頁面的主視角影響比較大，我們需要藉助js來計算確定一個最小高度臨界值（當然這個可以用css的min-height來實現）；

另外一個是，通過js判斷最小高度臨界值，再加上這個最小臨界值的class，為了處理那些特殊的佈局或者百分比無法完全解決適配的元素，比如字型的相關佈局