第一次做网站的时候，就遭遇到这种问题，制作的网页在同事的显示器上扭曲了，原因是做网站时，没有考虑到不同显示器的分辨率，固定的网页自然不是被拉伸就是分尸，解决办法有：
方法一：创建各种不同分辨率下的页面；
1 function diffPage(){ 2 ????var url1280 = ‘demo[1280].html‘; 3 ????var url1024 = ‘demo[1024].html‘; 4 ????var url800 = ‘demo[800].html‘; 5 ????if((screen.width==1024) &&(screen.height==768)){ 6 ????????window.location.href=url1024; ??7 ????}else if ((screen.width==1280)&&(screen.height==800)) { ??????8 ????????window.location.href=url1280; 9 ????}else if ((screen.width==800)&&(screen.height==600)){ ???????10 ????????window.location.href=url[800];11 ????} else{12 ????????window.location.href=url1280; ??????13 } ?这种方法虽然解决了页面分辨率的问题，同时对工作量也加大了不少，也就是有多少分辨率，就要为此写多少个页面。
方法二：给不同分辨率做不同的样式文件，依然用js判断；
方法三：和方法二差不多，给不同分辨率做不同的样式文件，使用媒体查询来判断；
媒体查询是css3推出的新特性，在满足css3规范的田间下，包含多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。
1 <!-- link元素中的CSS媒体查询 --> 2 <link rel="stylesheet" media="screen and (min-width: 1205px) and (max-width: 1280px)" href="css/index[1025-1280].css"> 3 ?4 <!-- 样式表中的CSS媒体查询 --> 5 <style> 6 @media (max-width: 1024px) { 7 ??.page { 8 ????width: 80%; 9 ??}10 }11 </style>
解决网页分辨率的方法
原文地址：http://www.cnblogs.com/gufeibai/p/7569485.html