关于响应式网站开发的一些注意事项

响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

在响应式网站的设计和开发中，我们需要注意哪些问题，下面我们聊一聊这个话题。

 

对于界面设计，我们以前针对桌面产品的设计可能就是一个尺寸的，每个模块的位置比较固定，但是在响应式设计中，这些东西就改变了，设计师会根据产品的需要设计多个版本的设计，在这些不同的版本中，模块A在1024的宽度下，可能会是黑色背景，但是到了768下面可能会变成白色背景，实现了在不同宽度的不同展现。这里面颜色、背景、宽高等都可改变，但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致，因为在响应式的页面中，我们会使用流式布局，在固定版式通过绝对定位或者外边距负值的方式改变DOM 顺序和视觉顺序的技巧，在这里可能并不适用。

 

在响应式设计中，我们不仅要考虑以前桌面用户的使用习惯，也必须兼顾不同尺寸的手持设备。比如大家在PC上习惯使用的浮层在某些小尺寸的设备上就没法使用了，就像我们下图中看到的。而且一些响应区域小的链接也不方便我们使用手指来操作，因此我们可以做到“求同存异”。比如我们根据屏幕的尺寸，来决定是否使用浮层、或者增大操作区域、或者“整齐划一”。比如在新浪视频项目区别设备来使用浮层，将所有的链接的操作区域做成方便手指操作的大小。

 

响应式设计是从产品角度来进行的设计，在这个阶段我们需要产品经理、交互设计师、设计师以及工程师共同介入了。我们需要打破传统的思维模式去思考设计，从纯粹传统的Web向移动应用过度。通过我们第一步明确的信息架构，来从最小显示屏的移动设备做产品设计，在移动设备中抛弃更多的使用干扰，保证核心功能的最优体验;同时交互与设计师的介入处理如何把模块设计的更小更有弹性，并初步确定设计风格、设计框架等方案;而工程师需要在产品经理与设计师确定的方案中进行代码测试，充分利用不同设备独有的特性并进行框架搭建。

 

虽然我们提到从最小显示屏的移动设备做产品设计，但实际不论是设计师还是工程师都是从最复杂的桌面端开始，把表现最丰富最复杂的功能实现，做减法对结构的改动会适当的减少。

 

对我们页面制作工程师而言，在只有桌面端的时候，我们面向的设计稿是单一的，但是到了响应式设计，这种情况就改变了，虽然说我们可以让设计师根据我们产品的受众总结的屏幕宽度断点给予几个版本的设计稿，但是这些设计稿并不能覆盖我们用户的所有设备情况，比如我们缩放浏览器的时候，从1024到320之间，包含了太多不同分辨率的设备。因此，在此开发过程中我们需要不断的和设计师沟通在设计稿无法覆盖情况下的特殊状况。