随着智能手机的普及，多数人也不再仅仅用电脑来浏览网页、搜索东西，现在有手机，平板电脑等等。所以原来固定宽度的设计在手机、平板上浏览体验并不好，因此我们的网页需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果、提供更好的用户体验，下面我们来看看：

正常效果

比较窄的效果

最窄的效果

当屏幕分辨率大于1024px时，网页宽度将会是960px。通过Media query来检验屏幕分辨率，如果小于960px，页面宽度将会用自适应来取代固定宽度；如果小于600px，主题和边栏将会撑满屏幕并一列显示。当小于480px时，主题和左侧栏会在一栏显示

代码就不贴了，太多

在网页代码的头部，加入一行viewport元标签。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

我们需要通过CSS3 Media Queries 来对不同的屏幕定义不同的样式

<link href=”media-queries.css” rel=”stylesheet” type=”text/css”>

这个样式可以根据实际情况和实际需要来写

此外由于IE8或者更低的版本不支持CSS3媒体查询，但通过添加脚本 css3-mediaqueries.js来实现这一功能。

这样基本来在不同的屏幕上浏览就不会有什么问题了，不过还有许多细节方面的问题需要注意！