pc端頁面的適配

 目也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;保持居中顯示，盒子裏面的內容，咱們再另外調整

 對於高度的適配

 通常狀況下，頁面都比較高，咱們經過給每一個模塊設置具體的高度值來作頁面，而後頁面會出現導航條，咱們能夠拉動導航條來瀏覽，可是有的頁面的需求是主體內容直接在不一樣的瀏覽器上都能完整顯示，不經過導航條來瀏覽

如何作？

一、百分比的應用

百分比的應用在於主視角的定位和縮放，百分比的取值以原設計稿的尺寸爲標準。什麼意思呢？舉個栗子，一個元素在原設計稿裏，量出來距離頂部是 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的主視角不 是不少，影響不大）。

二、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，爲了處理那些特殊的佈局或者百分比沒法徹底解決適配的元素，好比字體的相關佈局