目也pc端有適配的需求：目前我們pc專案的設計稿尺寸是寬度1920，高度最小是1080。
適配目標：
1.在不同解析度的電腦上，網頁可以正常顯示
2.放大或者縮小螢幕，網頁可以正常顯示
對於寬度的適配
對於寬度適配：
首先設定html,body
然後我們可以把頁面分解為背景層(一般寬度都會大於1200px)和內容層(一般寬度都會小於1200px)，對於背景層，我們一般都要求完全鋪開，主要有以下幾種情況：
1.背景色為純色：我們可以直接.box則可以鋪滿
2.背景設定為背景：
我們有情況用.box
有的情況需要用：.box
對於內容層我們保證我們的內容都封裝在盒子內，然後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，為了處理那些特殊的布局或者百分比無法完全解決適配的元素，比如字型的相關布局
pc端rem適配 聊聊PC端頁面適配
目前pc並沒有像移動端那樣，可以用rem單位這種一站式解決方案，因為pc需要考慮低階瀏覽器，查詢和background size這些新屬性都不能用。設計稿 1920 1080 190 2.16 自己測1920 945 2.03 14寸普通筆記本 1366 768 190 2.36 參考 參考 登入考...
pc端頁面的適配
目也pc端有適配的需求 目前我們pc專案的設計稿尺寸是寬度1920，高度最小是1080。適配目標 1.在不同解析度的電腦上，網頁可以正常顯示 2.放大或者縮小螢幕，網頁可以正常顯示 對於寬度的適配 對於寬度適配 首先設定html,body 然後我們可以把頁面分解為背景層 一般寬度都會大於1200px...
pc端頁面適配思路
對於pc端網頁的適配，筆者大體的適配方法就是在整體布局div時，盡量讓width height都使用百分比方式，而對於內部div，以及元素之間的margin padding width height等屬性，使用rem來進行適配。直接貼 說明原理。let designsize 1920 定義設計圖大小...