有时候我们在写页面的时候，会发现绝对定位的父元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会出现混淆，似乎父母的相对定位不起作用。笔记本电脑的分辨率一般在1366768左右，PC的分辨率一般在19201080；这个链接是常见的电脑分辨率：http://blog.csdn.net/liyuanbh...写网页的时候，如果是1920的，用高分辨率写完后，到分辨率小的笔记本上查看同样的网页，你会发现笔记本电脑的显示效果基本上就是网页在宽屏大显示器下放大到1.5倍左右的显示效果。解决方法：1、安全宽度：为了页面在不同分辨率下能正常显示，需要给页面一个安全宽度。一般在制作1920px宽的页面时，中间一定要留出1200px左右的安全宽度，并且要居中。内容应该写在这个宽度的框中。如果有背景图或轮播图必须覆盖整个页面，则必须设置为居中对齐，这样当分辨率降低时，背景图或Banner图的左右宽度均为1200，在中间。盒子仍然居中对齐，不会从左到右偏离。盒子里的div等小盒子可以用百分比表示，实现页面适配。在布局页面结构时，一些盒子容器是必不可少的，比如安全宽度为1200px的div。例如：做一个活动页面，这个页面的背景是一张大图，需要在大图上放置一些小图来实现与大图的定位，不能直接将大图作为背景！而是继续在放大图背景的div中放置一个安全宽度的div，然后作为父元素对里面的子元素进行相对定位和绝对定位，这样就不会出现不同分辨率下的绝对定位混乱。2、绝对定位的使用：使用绝对定位时，元素的父元素必须设置为相对定位，这样在不同分辨率下定位才不会混淆，但是前提是父元素在一个安全的宽度。如果父元素本身是会因为分辨率降低而改变的元素，那么定位肯定会跟着改变。3、zoom属性或transform:scale(x,y)总结网友的经验，通过添加zoom属性，可以让页面的一个block根据不同的分辨率自动缩放到合适的区域，但是有一个bug，也就是火狐浏览器这个属性是杀不死的，即使你用了transform:scale(x,y);属性，这将无济于事。还有一个小问题。页面加载缓慢时刷新页面，会先显示放大效果，然后变为缩小效果，会闪烁一会。我还没有找到解决办法。希望懂的朋友多交流。缩放代码如下：$(function(){varw=window.screen.width;varzoom=w/1920;$("#container").css({"zoom",zoom,"transform":"scale("+zoom+")"});})结果为：除firefox外，其他浏览器都可以正常支持zoom属性，将页面上需要缩放的块进行缩放，达到适应的效果currentresolution，而transform:scaleis先将页面显示为原页面放大后使用scale，则缩小相当于当前页面的缩小效果，两侧自然留白。PS：我觉得zoom属性很好用，为什么现在用的不多，连firefox也不支持，很难找到解决办法。所以我只能改变我的代码结构，提高代码的严谨性。写出高效兼容的代码，是每个前端义不容辞的责任。【本文综合了网友的意见和经验】
