响应式网页设计心得分享_html/css

在提出响应式网页设计这一概念之前，网站建设者常见的做法无非是准备两套网站程序，其中一套是供web端用户访问，另一套是供wap端用户访问的。这样的解决方法比较复杂，两套程序维护起来也非常的不容易。尽管现在很多CMS建站程序都能有效保证web端与wap端网站的数据同步，但这始终不是解决问题的最好方法。随着移动终端时代的逐步发展，各种不同尺寸的移动设备诞生，原先的两套程序显然已经无法满足多种移动设备，响应式网页设计正是为了解决这一问题而诞生的。

代码君网站近期处于响应式布局设计测试阶段，目前本网站主要模块部分基本已经完成了响应式布局设计，朋友们可缩放浏览器窗口体验不同尺寸的设备浏览本站可能看到的效果。

其实在此之前袁程旭本人还是比较反感使用响应式布局设计的，因为站长们都知道，咱这些中小站长主要收入都来源于网站投放的第三方广告。响应式布局设计虽然美观，但会影响那些本身就固定了尺寸的广告位投放。本来袁程旭打算采取最老式的做法，给代码君网站新增一个wap端版本，但无奈的是测试结果总不尽如人意。最终本站还是采取了响应式布局设计，且看我是如何解决问题的吧。

响应式网页设计如何解决固定尺寸的广告位烦恼？

其实解决办法很简单，这是本次代码君网站响应式设计测试过程中袁程旭总结出来的心得。首先你该怎么编码就怎么编码，把最原始的一套网站程序设计出来。比如本站原先没采用响应式布局时是宽度为1100像素的固定尺寸网页，那只要浏览者所持有的设备宽度大于1100px，本站所有的一切模块均能正常展现。这么想的话问题就很简单了，我们只需对小于1100px的设备进行响应式编码设计。

在里加入这条元标签，保证移动浏览器中页面将以原始大小显示且不能缩放：

然后用基于CSS3的媒介查询(Media Query)特性对屏幕宽度小于1100px的设备分类探讨，将部分模块的样式进行重写，满足响应式网页布局设计要求。一般情况下，网站需要重写的模块无非是导航栏和网页右侧模块。值得注意的是，重写的样式需杜绝使用绝对宽度布局或者具有绝对宽度的元素。

听起来好像还蛮复杂的，但其实并没有那么难。简单总结一下，就是当浏览者所持有的设备宽度大于网站原先设定的固定宽度时，就忽略响应式布局代码；反之，当设备宽度小于网站宽度时，为了提升用户体验就必须分情况进行响应式布局设计，对相应模块的代码进行样式重写。

之所以会这么复杂是为了网站的广告位考虑，要是您的网站不屑于投放第三方广告创收的话，直接忽略本文所说的一切，从一开始编码时就采用自适应布局设计就可以了。当然，如果您不确定后期是否会进行固定尺寸的广告位增添，可在网站编码时采用如下方法：

1、外层控制网页主体宽度的div采取固定像素限定；

2、内层模块对应的div可用原先设定的尺寸除以外层尺寸后以百分比形式设定；

这样，当我们后期想要更换网站程序为响应式布局时，直接更改外层div的固定像素为百分比形式即可，对部分模块分情况进行简单的样式重写便可轻松实现网页自适应布局啦。

来源： 代码君（daimajun.com） | 欢迎分享本文，转载请注明出处！