《微交互：漫谈响应式网页设计》.pdf

微交互：漫谈响应式网页设计 /s?__biz=MjM5NjA3ODI3Ng==m... 微微交交互互：：漫漫谈谈响响应应式式网网页页设设计计 2014-02-21 微交互 1. 如何理解响应式设计 （RWD ） zhongfan ：学究一些，首先大家先了解一下响应，然后再讲一下设计， 响应就是我发出的请求能得到什么样子的回复，比如我说 “你好”，你会 很容易的给我回复”你好”，因为大家都是中国人，如果我说”hello”，我们 这代人如果上过初中，他也会给我说”Hello”，但是如果我给对你 说”Bonjour”，那可能只有高配的人才可能知道了。这里面，就举了一个 例子，我的应答对象就相当于我们要讲的响应式的设备，他必须能够解 析 我发给他的需求。然后咱们再讲一下设计，设计的官方解释是这样 的： 1.设下计谋。 2.根据一定要求﹐对某项工作预先制定图样﹑方案。 3.指搞设计工作的人。 直白的讲，设计其实就是设了一个计，来完成我们的需要的工作目标。 相相关关推推荐荐：： 《想学响应式设计？来看史上最全的响应式设计资源库》 《不要落伍！来和小伙伴一起学习响应式网页设计》 第1页共5页 14-2-21 下午4:44 微交互：漫谈响应式网页设计 /s?__biz=MjM5NjA3ODI3Ng==m... 从前面我们讲的响应可以看到，响应是双方的，是互动的过程，在这个 过程中我们要考虑双方的承受能力，比如我们总不能让小孩子扛大包。 在咱们网页设计 方面就是咱们要考虑设备的性能，从网速、Dom 节点数 量、屏幕的大小等等，如果我们从前后端结合，对小孩子给糖果，给苦 力大包，那样就做到了响应式。 但是，我下面讲的响应式是狭隘的，我们只是从 Web Builder 这一层做 到了响应式。 2.响应式设计中的界面设计 对于界面设计，我们以前针对桌面产品的设计可能就是一个尺寸的，每 个模块的位置比较固定，但是在响应式设计中，这些东西就改变了，设 计师会根据产品 的需要设计多个版本的设计，在这些不同的版本中，模 块A在1024的宽度下，可能会是黑色背景，但是到了768下面可能会变成 白色背景，实现了在不同宽度的不同展现。这里面颜色、背景、宽高等 都可改变，但是有一点我们需要注意的是 DOM 节点的顺序最好保持一 致，因为在响应式的页面中，我们会使用流式布局，在固定版式通过绝 对定位或者外边距负值的方式改变DOM 顺序和视觉顺序的技巧，在这里 可能并不适用。 3.针对媒体查询的断点 我们知道，我们通过媒体查询（Media Query）的方式改变网页的布局， 我们在哪些宽度下改变布局，也就是我们所称作的断点，我们更习惯的 思维是针对某些设备（比如桌面、平板电脑、手机）的数据来设置断 点，比如 1024 对应桌面、768对应pad、480 对应手机，但实际上，这 些东西是靠不住的，因为这些屏幕尺寸会根据时代的发展不断的变化， 第2页共5页 14-2-21 下午4:44 微交互：漫谈响应式网页设计 /s?__biz=MjM5NjA3ODI3Ng==m... 我们的响应不应该只针对某些设备，我们需要的是一个区间值，而不 是 将某一分辨率对应一种设备。断点肯定是需要有的，那这些断点是如何 设置的呢？怎么才能不是为了断点而断点呢？实际上，这些断点的设置 都是根据内容的需要做的，当我们的内容在达到一个临界点后，视觉效 果不符合