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

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

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

       

 

 

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

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

 

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

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

示例效果：

    
top
	

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

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

 

 

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

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

 

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

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

实现步骤：

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

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

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

 

解决方案四：响应式布局

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

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

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

 

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

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

 

建议：

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

 

 

相关阅读：

同一个HTML页面，在不同浏览器上的显示效果不一样！解决HTML页面的浏览器兼容问题

 

 

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