下图是Jisc网站在手机屏幕上的显示，看上去比较舒服，这都归功于网站设计师在字体、图片等元素之间留足了一定的空间。Jisc网站在电脑桌面呈现时会有很多水平导向的区块，其实下图中的Shared services、sector deals是并列关系，在电脑屏幕上是以水平方向呈现的，但设计师并没有只关注水平方向的间距，同时也考虑到了网站在小屏幕上垂直呈现的习惯，让网站更清晰、可读性更高。

　　网站上的留白还可以给不同的区块划分界限，给用户一些喘息的机会。Mashable的博客就利用负空间做到了这一点。Mashable在电脑上会显示为3列：小图+文本，中图+文本，大图+文本，如果在手机上也以这样的方式呈现的话，可能已经惨不忍睹了。不过设计师考虑到了手机的竖屏，在不同元素垂直方向留足了空间，让不同文本区块之间界限清晰可见，也让界面看上更加简洁。

　　因此，在我们设计响应式网站的留白问题时，记得不要总是从元素的水平方向出发，也要多考虑不同元素、不同区块在垂直方向上的间隔、距离，毕竟所有元素在小屏幕上都是倾向于竖直展现的，这样才能真正发挥留白在响应式网站中的作用。

　　字体和间距

　　做好响应式网站中的留白还需要注重文本的字体。除了改变字体的大小，我们还可以调整字体的行高、字距、颜色甚至是两个文本区块之间的距离使文本更容易阅读，画面看上去更加和谐。

　　The Next Web网页在电脑上显示时页眉和导航菜单之间留的空白区域比较大，但在移动设备上显示时，空白区域缩小了(见下图)，页眉TNW文本的字体有所减小，图片下方文本段落之间的间距有所拉大，这都是TNW根据自身特点合理运用留白的体现。

　　Agra culture这个网站也是一样，在电脑上显示时每张图片上的文字是设有悬浮效果的。但由于悬浮效果在手机等设备上无法显示，Agra culture在小屏幕上果断放弃了这一特效，让文本就直接出现在图片的正中央。虽然这个改动不大，但是对用户来说却保证了舒适的体验效果。

　　重新调整图片

　　响应式设计中经常还涉及到一个大问题，那就是图片。在网站中运用留白的时候我们也要考虑到图片怎样合理放置。由于大部分显示器都是宽屏的，不少网站使用宽屏的图片。这也意味着在移动设备中展示时我们需要缩小图片或者重新定义图片大小。看看下面的栗子能不能给你一些启发吧!

　　UPP Broadgate Park网站在电脑桌面上显示时，主页面上会出现幻灯片，而当设备分辨率小于500px，它会显示为加长的图片(如下图)。虽然图片加长了，但设计师在设计时仍然留意到竖直方向上的空间问题，删掉不必要的元素，让网站看上去更加简洁、清晰。不过实现这一点确实有难度，因为你需要知道图片的大小以及每张图片的实际值，这样才能恰当的重新定义图片大小，不过如果你愿意做出这样的努力，小飞相信这绝对是物有所值的。

　　The Golden Isles又是另一种情况了。网站设计师认为电脑桌面上的幻灯片在移动设备上并没有很大意义，所以为了网站的清晰明了他们直接将图片隐藏起来。与此同时，将水平的导航菜单以两列竖直排列下来，填补一定的空间，让网站不显空洞无物。

　　不少设计师认为网页空间本来就有限，认为通过有限的空间尽可能传递更多的内容才是王道。其实内容越多对用户来说并不一定是好事，反而可能会对用户产生干扰。在做网站时我们应该牢记少即是多的原则，学会利用留白给网站带来独特的美感和强大的表现力。赶紧在你的响应式网站中运用留白吧!