将网站更改为自适应网页的具体步骤

将网站更改为自适应网页的具体步骤：

1.在HTML头部增加viewport标签
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：

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

这段代码支持Chrome、Firefox、IE9以上的浏览器，但是不支持IE8及以下的浏览器。

2、在CSS文件尾部增加针对不同屏幕分辨率的规则
使用如下代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。下面代码是针对Z-Blog，WordPress相关标签名称只需要修改一下即可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

3、布局宽度使用相对宽度
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就更方便。也可以不适用相对宽度，这就需要@media screen and (max-device-width:480px) 里面增加各个div的针对小屏幕的宽度，实际上这样更麻烦。

4、页面使用相对字体
在HTML页面上不要使用绝对字体（px），要使用相对字体（em），对于大多数浏览器来说，通常用 em=px/16 换算，例如16px=1em。

根据上述几点内容来看，当你使用上面的方法的时候，你就能够发现从iPhone手机浏览到体验更佳的页面，但是需要解决这样一个问题，顶部导航栏navbar显示存在着问题，换行后被下面的文章遮挡了，这个问题应该如何解决（在导航栏divNavbar 的样式中加入 “overflow：hidden” 一行就可以解决这个问题了！）

按照上面几步进行修改，就可以将一个网站轻而易举的修改成为一个可以适合多种设备不同屏幕宽度的自适应网页了。