漫谈一下响应式设计网站
响应式设计中的界面设计
对于界面设计,我们以前针对桌面产品的设计可能就是一个尺寸的,每个模块的位置比较固定,但是在响应式设计中,这些东西就改变了,设计师会根据产品 的需要设计多个版本的设计,在这些不同的版本中,模块A在1024的宽度下,可能会是黑色背景,但是到了768下面可能会变成白色背景,实现了在不同宽度 的不同展现。这里面颜色、背景、宽高等都可改变,但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致,因为在响应式设计的页面中,我们会使用流式布局,在固定版式通过绝对定位或者外边距负值的方式改变DOM 顺序和视觉顺序的技巧,在这里可能并不适用。
针对媒体查询的断点
我们知道,我们通过媒体查询(Media Query)的方式改变网页的布局,我们在哪些宽度下改变布局,也就是我们所称作的断点,我们更习惯的思维是针对某些设备(比如桌面、平板电脑、手机)的 数据来设置断点,比如 1024 对应桌面、768对应pad、480 对应手机,但实际上,这些东西是靠不住的,因为这些屏幕尺寸会根据时代的发展不断的变化,我们的响应不应该只针对某些设备,我们需要的是一个区间值,而不 是将某一分辨率对应一种设备。断点肯定是需要有的,那这些断点是如何设置的呢?怎么才能不是为了断点而断点呢?实际上,这些断点的设置都是根据内容的需要 做的,当我们的内容在达到一个临界点后,视觉效果不符合人们的审美或影响了内容获取时,这就是我们需要的断点。但是我们可能无法在视觉设计的阶段就能覆盖 其尺寸区间内容所有状况,这样我们就需要把它和现有的设备相结合确立断点。
因此,个人认为不同的项目,在响应式设计中需要的断点是不一样的。我们知道在媒体查询中有 width 和 device-width 两个特性,因为在手持设备中多数用到的是 webkit 内核的浏览器,我们一般会通过 viewport 的属性,将设备宽度赋予视窗的宽度
<meta name=”viewport” content=”width=device-width,initial-scale=1, maximum-scale=1″>这样我们就能根据设备的宽度来对某些设备做媒体查询了。
交互上的那些不同
在响应式设计中,我们不仅要考虑以前桌面用户的使用习惯,也必须兼顾不同尺寸的手持设备。比如大家在PC上习惯使用的浮层在某些小尺寸的设备上就没 法使用了,就像我们下图中看到的。而且一些响应区域小的链接也不方便我们使用手指来操作,因此我们可以做到”求同存异”。比如我们根据屏幕的尺寸,来决定 是否使用浮层、或者增大操作区域、或者”整齐划一”。比如在新浪视频项目区别设备来使用浮层,将所有的链接的操作区域做成方便手指操作的大小