读完《响应式Web设计 HTML5和CSS3实战》第二版，让自己重新对响应式Web设计产生了浓厚的兴趣。最近一段时间沉迷于前端，已然忘却了原先对各版本浏览器进行“样式兼容”的痛。不得不说那确实是一个让人头疼的问题。
响应式Web设计是一种利用弹性网格布局、弹性图片／媒体、媒体查询等技术实现的一种Web设计解决方案。使用响应式Web设计，开发者可以让用户在不同的终端设备及视口上访问到展示优雅的同一张页面。也许好奇的你会问，使用响应式Web设计，是不是能让移动端设备浏览网页的效果与电脑一致？
这是一个值得思考的问题：是要等价的功能还是要等价的外观？
其实答案很显然，应该选择等价的功能。要是在没有接触过移动端开发之前，自己应该会觉得等价的外观是重要的。在接触了Android和iOS开发之后，突然明白对于一个产品（应用）在不同的场景里等价的功能才是最重要的。Web设计也是一样的道理，大同小异。一定要追求“看起来一摸一样”，这种做法可以说是一种任性的做法。
作为机智的开发者，总有办法来解决样式的兼容问题。对于陈旧版本的浏览器，如：IE6、7、8、9这些老古董，可以根据实际的情况去做适配。如果使用Bootstrap3.X以上的版本倒是可以勉强的支持IE8、9，一些HTML5和CSS3的特性只能配合补丁文件达到正常效果。我们也可以任性一回，使用autoprefixer帮助解决CSS的兼容性问题。举个栗子，目标样式如下：
div {
width: 100px;
height: 200px;
display: flex;}
转换后代码，如下：
div {
width: 100px;
height: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
这样是不是很方便？再也不用担心记不住那些前缀，还能提高写代码的效率。
在响应式Web设计的方案中，开发者可以使用媒体查询针对不同的终端设备进行样式的控制。弹性的布局会要求喜欢使用像素（px）布局的开发者转换为用弹性比例大小布局。这一点移动端开发的童鞋应该会熟悉。其实就是用元素所在容器的大小除以元素的大小，这样就得到了元素所在容器中占的比例。使用弹性比例布局可以解决一些不必要的麻烦。
在新的Web设计浪潮下，开发者可以使用经过几次改版的“弹性盒子（Flexbox）”布局来解决日常开发中棘手的问题。图片的响应式处理，依旧有点像移动端，使用picture元素根据不同的视口，展示合适的图片。也许有人会疑惑，为什么不使用width:100%去做控制？很好，这是一个好问题。请你耐心的去思考一下。
HTML5和CSS3给前端开发者带来了酷炫效果的同时也让开发者开始了新一轮的Web开发进阶之路的学习热潮。HTML5的新标签、表单、CSS3的新特性、SVG、动画、滤镜、变形、线程、离线存储等知识都是需要时间去钻研与实践的。也正是因为Web技术不断的发展，所以普通用户才得到了更好的用户体验。
PS:关于《响应式Web设计 HTML5和CSS3实战》这本书，个人的阅读建议是：在阅读此书之前最好有一些Web开发的经验积累，这样阅读本书的收益会更大一些。
网友评论