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

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

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

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

参考资料：百度流量统计院分辨率使用情况：http://tongji.baidu.com/data/screen
<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 查询）
<http://www.runoob.com/cssref/css3-pr-mediaquery.html>
，比如说当屏幕大小为1320时使用 3X4排版，当屏幕大小为1680是使用4x3排版，当屏幕大小为1920时使用6X2排版。

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

这个方法和解决方案三相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。
 <link rel="stylesheet" media="screen and
(max-device-width:1024px)" href="test-01.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注释，方便修改。

相关阅读：

同一个HTML页面，在不同浏览器上的显示效果不一样！解决HTML页面的浏览器兼容问题
<https://blog.csdn.net/dnruanjian/article/details/85326386>

=========================这里是结束分割线===================================

热门工具换一换