漫谈响应式设计网站

响应式设计中的界面设计

对于界面设计，咱们之前针对桌面产品的设计可能就是一个尺寸的，每一个模块的位置比较固定，可是在响应式设计中，这些东西就改变了，设计师会根据产品 的须要设计多个版本的设计，在这些不一样的版本中，模块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上习惯使用的浮层在某些小尺寸的设备上就没 法使用了，就像咱们图中看到的。并且一些响应区域小的连接也不方便咱们使用手指来操做，所以咱们能够作到”求同存异”。好比咱们根据屏幕的尺寸，来决定 是否使用浮层、或者增大操做区域、或者”整齐划一”。好比在新浪视频项目区别设备来使用浮层，将全部的连接的操做区域作成方便手指操做的大小。