标签：制作 分辨率 页面 表达式 screen ati window 没有 样式表
第一次做网站的时候，就遭遇到这种问题，制作的网页在同事的显示器上扭曲了，原因是做网站时，没有考虑到不同显示器的分辨率，固定的网页自然不是被拉伸就是分尸，解决办法有：
方法一：创建各种不同分辨率下的页面；
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>
标签：制作 分辨率 页面 表达式 screen ati window 没有 样式表
原文地址：http://www.cnblogs.com/gufeibai/p/7569485.html
