HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题

表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等）

举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。

问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。

参考资料：百度流量统计院分辨率使用情况：http://tongji.baidu.com/data/screen

解决方案一：设定固定宽度

通过设置固定宽度，都精确到px，整体居中，然后两边留白，在不同分辨率的显示器上显示效果一样的，只是两边的空白间距不一样。

示例效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0; padding:0;}
#top { 
	width:1024px;
	margin:0px auto;
	height:40px; 
	background-color:#09F;
	}
#fu{ 
	margin:10px auto; 
	width:1024px;
	overflow:hidden; 
	border:1px red solid;
	}
#left,#middle { 
	float:left;
	display:inline;
	}
#left{ 
	width:300px; 
	margin:20px;
	height:300px;
	background-color:#0FF;
	}
#middle { 
	width:444px;
	margin:20px 0px;
	background-color:#F6C;
	height:10px;
	}
#right {
	float:right;
	width:200px;
	background-color:#FC6;
	margin:20px;
	height:300px;
		display:inline;
	}
img { width:50px;}
</style>
</head>

<body>
    <div id="top">top</div>
	<div id="fu">
    	<div id="left">left<img src="0/1.jpg" /><img src="0/2.jpg" /><img src="0/3.jpg" /></div>
        <div id="middle">middle-这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。</div>
        <div id="right">right</div>
    </div>
</body>
</html>

注意：一般页面宽度设置为：

解决方案二：设置宽度值为百分比（自适应布局）

通过设置百分比长宽，对于不同分辨率的显示器上会自动适应大小。制作方法类似方案一，区别在于，将宽度width的取值设置为百分比，如90%。

解决方案三：根据不同的分辨率，加载不同的CSS样式文件

这个方法的思路是，分别针对800、1024、1366、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。

实现步骤：

1、针对不同分辨率，创建好不同的css文件。

2、在html页面的<head>标签中创建JS文件，来判断电脑分辨率，并根据结果调用不同的css文件。


<script>
    // 分辨率大于等于1600，大部分为1920的情况下，调用此css
    if(window.screen.width >= 1600){
        document.write('<link rel="stylesheet" href="css/index_1920.css">');
    }
    // 分辨率再在1024-1600的情况下，调用此css
    else if(window.screen.width >= 1024){
        document.write('<link rel="stylesheet" href="css/index_1024.css">');
    }
    // 分辨率小于1024的情况下，调用此css
    else{
        document.write('<link rel="stylesheet" href="css/index.css">');
    }
</script>

注意：js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来

解决方案四：响应式布局

这个的基础是媒体查询（CSS3 @media 查询），比如说当屏幕大小为1320时使用 3X4排版，当屏幕大小为1680是使用4x3排版，当屏幕大小为1920时使用6X2排版。

方式一：根据不同的分辨率，引入不同的css样式表。

这个方法和解决方案三相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。

<!-- 分辨率低于1024，采用test-01.css样式表 -->
<link rel="stylesheet" media="screen and (max-device-width:1024px)" href="test-01.css">
<!-- 分辨率高于1400，采用test-02.css样式表 -->
<link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">

方式二：在同一个css样式表中，根据不同的分辨率，写不同的css样式

这个方法只有一个css样式表，在这个样式表里面，根据不同的分辨率，写不同的css样式。

<style media="screen">
    /*分辨率低于1024，采用下面的样式*/
    @media screen and (max-device-width:1024px){
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    }

    /*分辨率高于1400，采用下面的样式*/
    @media screen and (min-device-width: 1400px){
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    }
</style>

建议：

CSS样式较多时，建议使用外部样式表。
将同一部分的CSS样式写在一起，方便调整。
适当运用CSS注释，方便修改。