解决网页分辨率的方法

Posted 2020-10-07

第一次做网站的时候，就遭遇到这种问题，制作的网页在同事的显示器上扭曲了，原因是做网站时，没有考虑到不同显示器的分辨率，固定的网页自然不是被拉伸就是分尸，解决办法有：

方法一：创建各种不同分辨率下的页面；

 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>