漫谈响应式网页设计.pdf

漫谈响应式网页设计 1. 如何理解响应式设计（ RWD ） zhongfan ：学究一些，首先大家先了解一下响应，然后再讲一下设计，响应就是我发出的请求能 得到什么样子的回复，比如我说 你好“ ”，你会很容易的给我回复 ”你好 ”，因为大家都是中国人，如果 我说 ” hello，我们这代人如果上过初中，他也会给我说” ” Hello，但是如果” 我给对你说 ” Bonjour，那” 可能只有高配的人才可能知道了。这里面，就举了一个例子，我的应答对象就相当于我们要讲的响 应式的设备，他必须能够解析 我发给他的需求。然后咱们再讲一下设计，设计的官方解释是这样的 ： 1.设下计谋。 2.根据一定要求﹐对某项工作预先制定图样﹑方案。 3.指搞设计工作的人。 直白的讲，设计其实就是设了一个计，来完成我们的需要的工作目标。 从前面我们讲的响应可以看到，响应是双方的，是互动的过程，在这个过程中我们要考虑双方的承 受能力，比如我们总不能让小孩子扛大包。在咱们网页设计 方面就是咱们要考虑设备的性能，从 网速、 Dom 节点数量、屏幕的大小等等，如果我们从前后端结合，对小孩子给糖果，给苦力大包， 那样就做到了响应式。 但是，我下面讲的响应式是狭隘的，我们只是从 Web Builder 这一层做到了响应式。 2.响应式设计中的界面设计 对于界面设计，我们以前针对桌面产品的设计可能就是一个尺寸的，每个模块的位置比较固定，但 是在响应式设计中，这些东西就改变了，设计师会根据产品 的需要设计多个版本的设计，在这些不 同的版本中，模块 A 在 1024 的宽度下，可能会是黑色背景，但是到了 768 下面可能会变成白色背景 ，实现了在不同宽度 的不同展现。这里面颜色、背景、宽高等都可改变，但是有一点我们需要注意 的是 DOM 节点的顺序最好保持一致，因为在响应式的页面中，我们会使用流式布局，在固定版式 通过绝对定位或者外边距负值的方式改变 DOM 顺序和视觉顺序的技巧，在这里可能并不适用。 3.针对媒体查询的断点 我们知道，我们通过媒体查询（ Media Query ）的方式改变网页的布局，我们在哪些宽度下改变 布局，也就是我们所称作的断点，我们更习惯的思维是针对某些设备（比如桌面、平板电脑、手机 ）的 数据来设置断点，比如 1024 对应桌面、 768 对应 pad 、480 对应手机，但实际上，这些东西是 靠不住的，因为这些屏幕尺寸会根据时代的发展不断的变化，我们的响应不应该只针对某些设备， 我们需要的是一个区间值，而不 是将某一分辨率对应一种设备。断点肯定是需要有的，那这些断点 是如何设置的呢？怎么才能不是为了断点而断点呢？实际上，这些断点的设置都是根据内容的需要 做的，当我们的内容在达到一个临界点后，视觉效果不符合人们的审美或影响了内容获取时，这就 是我们需要的断点。但是我们可能无法在视觉设计的阶段就能覆盖 其尺寸区间内容所有状况，这样 我们就需要把它和现有的设备相结合确立断点。 因此，个人认为不同的项目，在响应式设计中需要的断点是不一样的。我们知道在媒体查询中有 width 和 device-width 两个特性，因为在手持设备中多数用到的是 webkit 内核的浏览器，我们一般 会通过 viewport 的属性，将设备宽度赋予视窗的宽度 meta name= ”viewport ” content= ”width=device-width,initial-scale=1, maximum-scale=1 这样我 ″ 们就能根据设备的宽度来对某些设备做媒体查询了。 @media screen and (max-device-width:480px){ selector{ } } 4. 交互上的那些不同 在响应式设计中，我们不仅要考虑以前桌面用户的使用习惯，也必须兼顾不同尺寸的手持设备。比 如大家在 PC 上习惯使用的浮层在某些小尺寸的设备上就没 法使用了，就像我们下图中看到的。而 且一些响应区域小的链接也不方便我们使用手指来操作，因此我们可以做到 ”求同存异