pc端的適配需求：目前我們pc項目的設(shè)計稿尺寸是寬度1920财剖，高度最小是1080幌羞。
適配目標：
1.在不同分辨率的電腦上寸谜，網(wǎng)頁可以正常顯示
2.放大或者縮小屏幕，網(wǎng)頁可以正常顯示
對于寬度的適配
對于寬度適配：首先設(shè)置html,body{width:100%;overflow-x:hidden;}
然后我們可以把頁面分解為背景層(一般寬度都會大于1200px)和內(nèi)容層(一般寬度都會小于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)整
對于高度的適配
一般情況下，頁面都比較高纪他，我們通過給每個模塊設(shè)置具體的高度值來做頁面鄙煤，然后頁面會出現(xiàn)導(dǎo)航條，我們可以拉動導(dǎo)航條來瀏覽茶袒，但是有的頁面的需求是主體內(nèi)容直接在不同的瀏覽器上都能完整顯示梯刚，不通過導(dǎo)航條來瀏覽
如何做？
1薪寓、百分比的應(yīng)用
百分比的應(yīng)用在于主視角的定位和縮放亡资，百分比的取值以原設(shè)計稿的尺寸為標準。什么意思呢向叉？舉個栗子锥腻，一個元素在原設(shè)計稿里，量出來距離頂部是 200px植康，如果寫死可能是top:200px 或者margin-top:200px,現(xiàn)在要轉(zhuǎn)成百分比旷太，那么這個值可能就是23.3%。這個值怎么算？如果設(shè)計稿是 1080供璧，200/1080=18.51%這樣計算出來百分比的值存崖。
但是，有個地方要注意睡毒，流體布局下来惧，百分比的值是根據(jù)父層計算的；absolute布局的元素是根據(jù)最近的relative父層計算的演顾；fixed布局的元素是根據(jù)window的可視區(qū)域計算的供搀。
所以，如果要達到適配的效果钠至，不只是當(dāng)前元素需要用百分比值葛虐，其參考計算的元素也是要動態(tài)變化的。
另 外還有一個就是圖片縮放的問題棉钧，pc很多主視角都是切圖的屿脐，但是pc不能直接用background-size（雖然強大的filter兼容可以使低版本 ie支持，但是之前說過用filter都要特別小心宪卿，特別是涉及到j(luò)s交互操作的的诵，很多坑）。在pc我們可以直接通過img標簽來插入圖片佑钾，通過設(shè)置 img寬度為100%西疤，高度auto，然后讓它根據(jù)父層來等比縮放來實現(xiàn)（img標簽實現(xiàn)縮放引起的另一個問題是該圖片不能用雪碧圖了休溶，但pc的主視角不 是很多代赁，影響不大）。
2兽掰、js監(jiān)測
需要js主要有兩個原因：
上面說了管跺，百分比是要有父層做參照物的，那么如果父層都用百分比禾进，那就是最終是根據(jù)window來參照的，因為pc絕大部分都是寬屏設(shè)備廉涕，而且他們的比例是不一致的泻云，我們來計算下(190是減去瀏覽器工具條、window桌面條狐蜕、我們頁面通用頂條)：
設(shè)計稿：1920/(1080-190) = 2.16
14寸普通筆記本：1366/(768-190) = 2.36
所以宠纯，我們不能寬高都100%按照屏幕尺寸來計算。另外考慮到主要是高度對pc頁面的主視角影響比較大层释，我們需要借助js來計算確定一個最小高度臨界值（當(dāng)然這個可以用css的min-height來實現(xiàn)）婆瓜；
另外一個是，通過js判斷最小高度臨界值，再加上這個最小臨界值的class廉白，為了處理那些特殊的布局或者百分比無法完全解決適配的元素个初，比如字體的相關(guān)布局
