解决网页分辨率的方法

【前言】

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

解决办法有以下几点：

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

二：给不同分辨率做不同的样式文件，依然用js判断；

三：和方法二差不多，给不同分辨率做不同的样式文件，使用媒体查询来判断；

下面来依次介绍：
（1）创建各种不同分辨率下的页面；

function diffPage(){
    var url1280 = 'demo[1280].html';
    var url1024 = 'demo[1024].html';
    var url800 = 'demo[800].html';
    if((screen.width==1024) &&(screen.height==768)){
        window.location.href=url1024;  
    }else if ((screen.width==1280)&&(screen.height==800)) {      
        window.location.href=url1280;
    }else if ((screen.width==800)&&(screen.height==600)){        
        window.location.href=url[800];
    } else{
        window.location.href=url1280;       
}

缺点：这种方法虽然解决了页面分辨率的问题，同时对工作量也加大了不少，也就是有多少分辨率，就要为此写多少个页面

（2）给不同分辨率做不同的样式文件，依然用js判断；

（3）和方法二差不多，给不同分辨率做不同的样式文件，使用媒体查询来判断；

媒体查询是css3推出的新特性，在满足css3规范的田间下，包含多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false

媒体查询可以分为link标签内的媒体查询和CSS样式表里的媒体查询

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="screen and (min-width: 1205px) and (max-width: 1280px)" 
      href="css/index[1025-1280].css">

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 1024px) {
  .page {
    width: 80%;
  }
}
</style>

解决网页分辨率的方法

猜你喜欢