目也pc端有適配的需求：目前我們pc項(xiàng)目的設(shè)計(jì)稿尺寸是寬度1920，高度最小是1080。

適配目標(biāo)：

1.在不同分辨率的電腦上，網(wǎng)頁可以正常顯示

2.放大或者縮小屏幕，網(wǎng)頁可以正常顯示

對于寬度的適配

對于寬度適配：

首先設(shè)置html,body{width:100%;overflow-x:hidden;}

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

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

2.背景設(shè)置為背景圖片：

我們有情況用.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;}

對于內(nèi)容層我們保證我們的內(nèi)容都封裝在盒子內(nèi)，然后margin:0 auto;保持居中顯示，盒子里面的內(nèi)容，我們再另外調(diào)整

?對于高度的適配

?一般情況下，頁面都比較高，我們通過給每個(gè)模塊設(shè)置具體的高度值來做頁面，然后頁面會(huì)出現(xiàn)導(dǎo)航條，我們可以拉動(dòng)導(dǎo)航條來瀏覽，但是有的頁面的需求是主體內(nèi)容直接在不同的瀏覽器上都能完整顯示，不通過導(dǎo)航條來瀏覽

如何做？

1、百分比的應(yīng)用

百分比的應(yīng)用在于主視角的定位和縮放，百分比的取值以原設(shè)計(jì)稿的尺寸為標(biāo)準(zhǔn)。什么意思呢？舉個(gè)栗子，一個(gè)元素在原設(shè)計(jì)稿里，量出來距離頂部是 200px，如果寫死可能是top:200px 或者margin-top:200px,現(xiàn)在要轉(zhuǎn)成百分比，那么這個(gè)值可能就是23.3%。這個(gè)值怎么算？如果設(shè)計(jì)稿是 1080，200/1080=18.51%這樣計(jì)算出來百分比的值。

但是，有個(gè)地方要注意，流體布局下，百分比的值是根據(jù)父層計(jì)算的；absolute布局的元素是根據(jù)最近的relative父層計(jì)算的；fixed布局的元素是根據(jù)window的可視區(qū)域計(jì)算的。

所以，如果要達(dá)到適配的效果，不只是當(dāng)前元素需要用百分比值，其參考計(jì)算的元素也是要?jiǎng)討B(tài)變化的。

另 外還有一個(gè)就是圖片縮放的問題，pc很多主視角都是切圖的，但是pc不能直接用background-size（雖然強(qiáng)大的filter兼容可以使低版本 ie支持，但是之前說過用filter都要特別小心，特別是涉及到j(luò)s交互操作的，很多坑）。在pc我們可以直接通過img標(biāo)簽來插入圖片，通過設(shè)置 img寬度為100%，高度auto，然后讓它根據(jù)父層來等比縮放來實(shí)現(xiàn)（img標(biāo)簽實(shí)現(xiàn)縮放引起的另一個(gè)問題是該圖片不能用雪碧圖了，但pc的主視角不 是很多，影響不大）。

2、js監(jiān)測

需要js主要有兩個(gè)原因：

上面說了，百分比是要有父層做參照物的，那么如果父層都用百分比，那就是最終是根據(jù)window來參照的，因?yàn)閜c絕大部分都是寬屏設(shè)備，而且他們的比例是不一致的，我們來計(jì)算下(190是減去瀏覽器工具條、window桌面條、我們頁面通用頂條)：

設(shè)計(jì)稿：1920/(1080-190) = 2.16

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

所以，我們不能寬高都100%按照屏幕尺寸來計(jì)算。另外考慮到主要是高度對pc頁面的主視角影響比較大，我們需要借助js來計(jì)算確定一個(gè)最小高度臨界值（當(dāng)然這個(gè)可以用css的min-height來實(shí)現(xiàn)）；

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