如何将web页面改成响应式

 我来答
雨曼丽
2017-08-09 · TA获得超过140个赞
知道小有建树答主
回答量:439
采纳率:0%
帮助的人:308万
展开全部
第一步:检测网页响应式
浏览器打开调试模式,打开响应式设计模式,在预览区域拖动大小范围,如果页面元素随大小变化而自适应,则页面是响应式页面,反之,页面是固定非响应式页面。如图:

第二步:编辑网页源文件
用Dreamweaver打开页面源文件,查看代码样式及文件结构,(Web页面的视觉效果由CSS样式表文件控制)。如图:

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

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

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

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

7
第七步:加工检测
响应式设计完成之后,用不同的终端全部检测一遍,有不合格的地方继续修改,这是程序员必须知道的也不能忽视的。
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式