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

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

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

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

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

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

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

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