不一样分辨率的电脑下，绝对定位错乱解决办法

有时候咱们在写页面中，会发现绝对定位的父级元素已经相对定位了，可是在不一样分辨率的电脑下，绝对定位仍是会错乱，彷佛父级的相对定位并无起了做用。

笔记本电脑的分辨率通常为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还不支持，并且很难找到解决办法。因此只能好好改变本身代码结构，提升代码的严谨性了，写出高效高兼容的代码，是每个前端责无旁贷的责任。

【该文章整合网友意见与经验总结所得】