佛山网站建设之如何在响应式网站中巧用

留白是网站规划中一门重要的东西，它能给网站带来许多优点。恰当的留白可以有用出色网站的主题，传递核心理念，吸引访客的留心力，可以简化画面，使各种元素的呈现更有层次、更加清楚，进步网站内容的可读性和可用性，还能添加网站的质感，建立一同的形象。留白一般意味着在页面的不同区块之间找到一个平衡点，在网站中运用好留白并不简略，但在照应式布局中用好留白难度就更上一层楼了。这是因为照应式网站一般需求设置不同的断点习气电脑、平板、手机等多种设备，页面上的留白必须确保在不同的设备上都能给用户供应友爱的阅读领会。不过不用担忧，小飞今日就是来送福利的，给我们介绍一下什么是留白，以及怎样在照应式网页规划中留白。

什么是留白?

留白最早是我国艺术作品创造中常用的一种方法，一些艺术大师比如画家等往往是留白的高手。在他们看来，留白有很高的审美价值，可以给观众留下幻想的空间，做到"以无胜有"、"此时无声胜有声"。在网站中运用留白也能发作相似的效果。网站中的留白，又称负空间，是指合理安排各种规划元素的空白空间，抵达页面布局洁净、精美的效果。但是，许多人常常会走进一个误区，认为留白就是将网站的某块区域设置成白色。留白的"白"并不是指颜色的"白"，而是指的是空白的"白"，代表的是一种无装饰、无额外元素的情况(下图灰色的区域也是一种留白)。它的体现方式多样，图片、图表、外边距、列甚至是文字之间的空间都是留白的一种。

如安在照应式网站中留白?

照应式网站最大的一个特征就是在习气电脑屏幕的一同在手机等小屏幕上呈现出色，网站上留白是否恰当也要看它是否可以满足不同设备的需求，首要仍是针对手机而言，以下几点建议也是根据这一点打开的。

从头设置导航菜单

导航菜单是做网站时首先会遇到的一个规划难点，但很少有规划师会将导航菜单与留白结合在一同。事实上，导航菜单处也应该留心留白问题。这是因为如果导航菜单处没有满足的留白空间，网站在小屏幕上进行闪现时，极有可能会呈现菜单栏断行(特别是在水平导航菜单的情况下)，视觉领会较差的效果，其他，移动用户在点击菜单项时也简略呈现点击差错的情况，会影响了用户的操作领会。

如何做好导航菜单的留白?如果导航菜单栏上的选项太多，而它们的确又是不可获取的，我们可以运用躲藏式菜单，比如汉堡图标，给网站留足空间。不过在运用躲藏式菜单之前，我们可以给导航菜单做一些设置，让它在不同的设备上有以最适合的方法展现，下面小飞将通过两个栗子来具体分析如何运用。

就FLA这个网站而言，如果在电脑桌面上闪现时，它会以上图这种周围面的导航菜单方式呈现，而在小屏幕设备上展现时，左面的导航菜单会躲藏到汉堡图标中，给用户满足的空间。除此以外，你可以看见左面的菜单选项之间是有必定距离的，这是规划师特意添加的，更便运用户在小屏幕设备上进行点击等手势操作。

相对FLA的网站，Dorigati在导航菜单上的设置要更凌乱一点。当用户通过电脑等大屏幕进行阅读时，导航菜单会水平摆放在网站上;如果屏幕再小一点，导航菜单会以两行呈现在用户面前(如上图)，有点栅格系统的意味;而当网站需求习气960px的断点时，导航菜单的布局会从水平变成垂直的，呈现在网站的周围面，Logo也会相应的改动方位;如决断点再小一点，导航菜单就会躲藏到汉堡图标中，呈现在页面的上方。这种方法听上去比较繁琐，但是它的确是比较有用的一个解决方案，可以让网站在确保恰当的留白的一同给不同设备的用户供应天然、友爱的阅读领会。

更加注重垂直方向的留白

曩昔在规划针对电脑桌面的网站时，我们常常会留心网站上不同元素在水平方向上的距离。但当我们初步安排照应式网站的留白时，我们应该将更多的留心力放在元素垂直方面上的距离。这是因为手机屏幕常常是竖直的。如果不留心元素在垂直方向的距离，会影响各种元素在手机等小屏幕上的闪现，影响视觉效果的呈现。其他，垂直方向空白区域或留白的多少从某种程度上也决定着网站在手机等移动设备上的加载速度。下面仍是让栗子来证明吧!

下图是Jisc网站在手机屏幕上的闪现，看上去比较酣畅，这都归功于网站规划师在字体、图片等元素之间留足了必定的空间。Jisc网站在电脑桌面呈现时会有许多水平导向的区块，其实下图中的Shared services、sector deals是并排联络，在电脑屏幕上是以水平方向呈现的，但规划师并没有只注重水平方向的距离，一同也考虑到了网站在小屏幕上垂直呈现的习气，让网站更清楚、可读性更高。

网站上的留白还可以给不同的区块区别鸿沟，给用户一些喘息的时机。Mashable的博客就运用负空间做到了这一点。Mashable在电脑上会闪现为3列：小图+文本，中图+文本，大图+文本，如果在手机上也以这样的方法呈现的话，可能现已不忍目击了。不过规划师考虑到了手机的竖屏，在不同元素垂直方向留足了空间，让不同文本区块之间鸿沟清楚可见，也让界面看上更加简练。

因此，在我们规划照应式网站的留白问题时，记住不要总是从元素的水平方向启航，也要多考虑不同元素、不同区块在垂直方向上的距离、距离，终究所有元素在小屏幕上都是倾向于竖直展现的，这样才华真实发挥留白在照应式网站中的效果。

字体和距离

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

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

Agra culture这个网站也是一样，在电脑上闪现时每张图片上的文字是设有悬浮效果的。但因为悬浮效果在手机等设备上无法闪现，Agra culture在小屏幕上决断抛弃了这一特效，让文本就直接呈现在图片的正中央。虽然这个改动不大，但是对用户来说却确保了舒适的领会效果。

从头调整图片

照应式规划中常常还涉及到一个大问题，那就是图片。在网站中运用留白的时分我们也要考虑到图片怎样合理放置。因为大部分闪现器都是宽屏的，不少网站运用宽屏的图片。这也意味着在移动设备中展现时我们需求缩小图片或许从头定义图片大小。看看下面的栗子能不能给你一些启示吧!

UPP Broadgate Park网站在电脑桌面上闪现时，主页面上会呈现幻灯片，而当设备分辨率小于500px，它会闪现为加长的图片(如下图)。虽然图片加长了，但规划师在规划时依然留心到竖直方向上的空间问题，删掉不用要的元素，让网站看上去更加简练、清楚。不过完结这一点的确有难度，因为你需求知道图片的大小以及每张图片的实践值，这样才华恰当的从头定义图片大小，不过如果你甘愿做出这样的极力，小飞信赖这肯定是物有所值的。