不一樣分辨率的電腦下，絕對定位錯亂解決辦法

有時候咱們在寫頁面中，會發現絕對定位的父級元素已經相對定位了，可是在不一樣分辨率的電腦下，絕對定位仍是會錯亂，彷佛父級的相對定位並無起了做用。

筆記本電腦的分辨率通常爲1366768附近，PC電腦的分辨率通常爲 19201080；
此連接爲常見電腦分辨率：http://blog.csdn.net/liyuanbh...

當寫網頁時，若是在1920這樣的大分辨率寫好以後，再去小分辨率的筆記本看一樣的這個網頁，會發現，筆記本電腦顯示的基本爲寬屏大顯示器下網頁放大至1.5倍左右的展現效果。

解決辦法:
1.安全寬度:
爲了頁面在不一樣的分辨率下正常顯示，要給頁面一個安全寬度，通常在作1920px寬的頁面時，中間要有一個1200px左右的安全寬度，而且居中，全部的內容要寫在這個寬度的box裏，若是有背景圖或者輪播圖必須通欄整個頁面的時候，必定要設置成居中對齊，這樣當分辨率下降以後，背景圖或者Banner圖左右、中間1200寬度的盒子依然居中對齊，不會出現向左向右偏離。

盒子裏的div等小盒子能夠用百分比來表示，來達到頁面自適應。
在佈局頁面結構的時候，一些盒容器是必不可少的，好比1200px安全寬度的div。

例如：作一個活動頁面，其中這個頁面背景爲一個大圖，在這個大圖上要放一些小圖來與大圖實現定位，絕對不能以大圖直接做爲背景！

而是在放大圖背景的div裏繼續放一個安全寬度div，再把它做爲父元素作相對定位，給裏面的子元素作絕對定位，這樣就不會出現不一樣分辨率下絕對定位錯亂的問題了。

2.絕對定位的使用：
絕對定位的時候，該元素的父元素必定要記得設爲相對定位，這樣在不一樣分辨率下定位纔不會錯亂，可是前提是這個父元素在一個安全的寬度裏面，若是這個父元素自己是一個會由於分辨率下降而改變的元素，則定位必定會跟着亂。

3.zoom屬性或transform：scale(x,y)
經過總結網友經驗，經過加zoom屬性，可讓頁面某個區塊根據分辨率不一樣進行自動縮放到合適區域，可是有個bug，就是火狐瀏覽器打死都不支持這個屬性，即便用transform：scale(x,y);屬性也於事無補。還有一個小問題，在頁面加載慢的時候從新刷新頁面會先顯示放大的效果，再變爲縮小後的效果，會閃一下，這個還沒找到解決辦法，但願懂的朋友們多多交流。

zoom代碼以下：

$(function(){        
         var w=window.screen.width;        
         var zoom=w/1920;
         $("#container").css({
         "zoom",zoom,
         "transform":"scale("+zoom+")"
         });
     })

結果是：除了firefox之外，其餘瀏覽器能夠正常支持zoom屬性，而且頁面須要縮放的區塊總體縮放到了適應當前分辨率的效果，而transform：scale 則是先把頁面顯示爲已經把本來頁面放大後再使用scale，則該縮小至關於當前頁面下縮小的效果了，兩邊天然會留白。

PS：我以爲zoom屬性蠻好用的，怎麼如今都不怎麼用了呢，竟然firefox還不支持，並且很難找到解決辦法。因此只能好好改變本身代碼結構，提升代碼的嚴謹性了，寫出高效高兼容的代碼，是每個前端責無旁貸的責任。

【該文章整合網友意見與經驗總結所得】