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

版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85336448 表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等）

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

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

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

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

示例效果：

无标题文档 * {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;}       top              left         middle-这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 注释：允许使用负值。         right    

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

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

实现步骤：

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

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

      // 分辨率大于等于1600，大部分为1920的情况下，调用此css     if(window.screen.width >= 1600){         document.write('');     }     // 分辨率再在1024-1600的情况下，调用此css     else if(window.screen.width >= 1024){         document.write('');     }     // 分辨率小于1024的情况下，调用此css     else{         document.write('');     } 注意：js一定要写在标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来 ---------------------   

解决方案四：响应式布局 这个的基础是媒体查询（CSS3 @media 查询），比如说当屏幕大小为1320时  使用 3X4排版，当屏幕大小为1680是使用4x3排版，当屏幕大小为1920时使用6X2排版。

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

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

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

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

    /*分辨率低于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;         }     }  

建议：

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