切记... 哇塞，说到响应式设计，我先得说个啥叫Media Queries。哎呀，记得我10年前上大学那会儿，书上说的响应式设计，就像昨天的事情一样。现在啊，Media Queries已经得到了浏览器的广泛支持，响应式设计已经变成了现实。我写的那个CSS3 Media Queries 详解，都6年前了那时候叫2010年呢。Media Queries Lv3也在2012年成了W3C推荐标准， 那一年啊，就是响应式设计的爆发年。

这些年，各种设计精巧的响应式页面层出不穷，虽然国内老牌网站很少见，但在国外到处都是。虽然用的不算多， 但 我比较认同... 我这些年的一些想法需要整理一下这篇文章就是我近年来对响应式设计的实践和一些粗浅的经验和建议，响应式页面。

响应式设计的优点

响应式设计啊，就是为了让网站在各个设备上都有好的体验。但是它再好，也赶不上专门为单一设备优化的页面。响应式设计的优点不是体验本身， 而是它能用一套代码适应不同的设备——就是说尽量减少页面在移动端缩放、平移和滚动，我们一起...。

主要原因是要适应各种设备，响应式设计需要权衡很多因素，这对设计和前端都有要求。所以如果设计和前端是分开的，那他们就需要更紧密的沟通。有时候，为了平衡设计和实现，分工明确的团队会花费很多时间在沟通上。

响应式设计的实践

人间清醒。 我个人觉得，前端自己来做响应式设计比较好。如果一个人负责，那最好是加修设计的前端，主要原因是从设计出发有时候会妨碍响应式设计的初衷。如果设计师负责设计页面结构，那就简单了把内容分成块，然后像堆积木一样倒序摆放。

响应式设计不是万能的，它适用面其实有限。广义的响应式设计需要适应手机屏幕，对于那么小的小屏幕，信息承载能力自然有限。虽然可以从PC端做减法，但页面核心内容还是被严格限制着。所以复杂页面不适合响应式设计——一个简单的标准是页面上需要表达的内容不超过10个。其实吧， 互联网上绝大多数的站点业务都不复杂，所以响应式设计还是有市场的，特别是对于展示类网站，响应式设计几乎是首选，是吧？。

响应式设计的挑战

何不... 这几年，移动端对Web设计的影响越来越明显。简单列举一些常见的模式转变：

这些改变，让我们一眼就能看出一个页面是否是响应式设计——大尺寸交互元素配上简单空旷的页面风格。

既然移动端影响了PC端设计， 那么也一定有相当多的固有套路，比如：

响应式设计加上多语言，会让原本复杂的页面更麻烦。但是相比普通页面响应式设计和多语言的相性并不差。其实吧， 宽松的页面结构加上原本就为不同屏幕设计自适应布局，多语言化反而要更为顺利一些，当然前提是设计之初就已经有了很多考虑。于是就会常常遇到“自然换行”， 这种自然换行恰恰也是设计的一部分，一个页面如果能保证大部分内容自然换行都不会影响页面整体的话，才是成功的响应式设计，栓Q了...。

响应式设计的资源消耗

通常 响应式设计主要原因是一套结构的关系，所以比较节省开发资源。但其实吧，节省的后端开发和额外增加的前端工程以及设计上的制衡相互抵消。一个项目是否真的节省了资源， 走捷径。 到头来还是要看项目本身的复杂度，但从大的范围来看，相对节约资源是正确的，当然付出的代价就是一种平庸，主要原因是要融合又要做到体验的极致是相当困难的。

响应式设计的未来

Media Queries是响应式设计的基石，而宽度则是响应式设计的核心维度。虽然已经是一年多以前的图了但近几年移动端的变化已经减缓，所以还可以看看。针对设备做优化的好处是直接有效，成本低可控制。如果真的对页面内容做响应式设计， 单一语言还比较好控制，多语言总是会遇到各种奇葩问题，可能在各种妥协下页面的整体设计就一团糟了。

绝绝子... 就目前的流量和网络响应式设计还是显得太笨重。之前我做过一些页面的简单对比，相同页面平均速度要差3-4倍，相当可观。分析原因主要是PC的重量连带给响应式设计后 拖慢了整体页面的加载速度，无法与传统的单一优化的H5页面相比。这些问题等到未来网速加快会渐渐显得不能刺眼，不过当前还不能忽视。

响应式设计的编码问题

响应式设计的核心代码关键词是普通流。普通流是最能保证自适应的CSS定位机制， 清晰的文档上下文秩序，在这个基础上运用浮动和有限的定位，是响应式设计的主流做法。在这过程中有一些常见的编码问题需要注意：，出道即巅峰。

重庆网站建设

研究研究。 当前前端领域， React如火如荼，但React的响应式目前做起来就不那么方便。由于HTML由JS接管， 反倒是出现了连结构也根据不同屏幕变化的做法，已经与传统的响应式完全不同甚至是背道而驰的。

响应式强迫性地精简了页面是一场轻内容的战斗。未来我们可能面临更多未知的设备，响应式能否继续发展取决于这些新设备适用度。就目前响应式设计已经是非常成熟的一种套路， 要我说... 使用前只需确定业务是否合适即可。目前，无论是微软、Google、Apple，他们的不少页面都有相当不错的体验。

当前文章：响应式设计实践手札

成都网站建设公司_创新互联，为您提供外贸建站、电子商务、企业网站制作、网站维护、网站策划、品牌网站设计，算是吧...