如何将web页面改成响应式

1、第一步：检测网页响应式浏览器打开调试模式，打开响应式设计模式，在预览区域拖动大小范围，如果页面元素随大小变化而自适应，则页面是响应式页面，反之，页面是固定非响应式页面。如图：

2、第二步：编辑网页源文件用Dreamweaver打开页面源文件，查看代码样式及文件结构，（Web页面的视觉效果由CSS样式表文件控制）。如图：

3、第三步：植入响应式代码在CSS样式表中插入以下代码：@media screen and (min-width:200px) and (max-device-width:640px){/*这里写元素的样式*/}代码解释：这句代码是指定了在200像素~640像素之间的终端，显示的效果，在其他终端不显示。

4、第四步：横屏响应式设计在CSS中插入以下代码@media screen and (min-嘛术铹砾width:200px) and (max-devic髫潋啜缅e-width:640px){.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}}控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：

5、第五步：竖屏响应式设计在CSS中插入以下代码@media screen and (min-嘛术铹砾width:200px) and (max-devic髫潋啜缅e-width:640px){.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}}控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：

6、第六步：全屏响应式设计在CSS中插入以下代码@media screen and (min-嘛术铹砾width:200px) and (max-devic髫潋啜缅e-width:640px){.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}}控制元素在终端的横向展示（全屏拉伸缩放无滚动条），垂直方向用滚动条展示。如图：

7、第七步：加工检测响应式设计完成之后，用不同的终端全部检测一遍，有不合格的地方继续修改，这是程序员必须知道的也不能忽视的。