空白是网站设计的重要工具，可以为网站带来很多好处。适当的消隐可以有效突出网站的主题，传达核心概念，吸引访客的注意力，简化图片，使各种元素的呈现更加层次分明，提高网站内容的可读性和可用性。增加网站的纹理，建立独特的形象。消隐通常意味着在页面的不同块之间找到平衡。在网站中使用空白区域并不容易，但在响应式布局中使用它更加困难。这是因为响应式网站通常需要设置不同的断点以适应各种设备，如计算机，平板电脑，手机等。页面上的空白必须确保用户可以在不同的设备上提供友好的浏览体验。但不要担心，小飞在这里发送好处，告诉你什么是白色，以及如何在响应式网页设计中留空。
什么是留白?
最早的白色空间是中国艺术作品创作中常用的技巧。一些艺术大师如画家通常是白色空间的主人。在他们看来，白色空间具有很高的审美价值，可以为观众留下想象空间，实现“没有胜利”，“此时没有声音”。在网站上使用空白也可以产生类似的效果。网站中的空白区域，又称负空间，是指合理布置各种设计元素的空白空间，实现干净精致的布局。但是，很多人经常陷入误解，认为空白是将网站的某个区域设置为白色。白色的“白色”并不是指颜色的“白色”，而是指空白的“白色”，表示没有装饰且没有额外元素的状态（下图中的灰色区域也是一种白色空间）。 ）。它有各种各样的表达方式，图片，图表，边距，列，甚至文本之间的空间是一种空白。
如何在响应式网站中留白?
响应式网站的最大特点之一是它们适用于移动电话等小屏幕，同时适应计算机屏幕。网站上的空白区域是否合适取决于它是否能满足不同设备的需求，主要针对手机，以下点建议也是基于此。
重新设置导航菜单
导航菜单是在进行网站时首次遇到的设计难度，但很少有设计师将导航菜单与空白区域相结合。实际上，导航菜单还应该注意留空的问题。这是因为如果导航菜单中没有足够的空间，当网站显示在小屏幕上时，菜单栏很可能会被破坏（特别是在水平导航菜单的情况下）和视觉经验很差。此外，移动用户在单击菜单项时也容易出现点击错误，这会影响用户的操作体验。
如何将导航菜单留空？如果导航菜单栏上有太多选项并且它们实际上不可用，我们可以使用隐藏菜单（例如汉堡包图标）为网站腾出空间。但是，在使用隐藏菜单之前，我们可以对导航菜单进行一些设置，以便可以在不同设备上以最合适的方式显示。下面，小飞将分析如何通过两个栗子使用它。
就FLA网站而言，如果它显示在计算机的桌面上，它将以上图所示的导航菜单的形式出现，并在小屏幕设备上显示时，导航菜单在左侧将隐藏在汉堡图标中，为用户提供充足的空间。此外，您可以看到左侧菜单选项之间有一定的距离，这是设计师特别添加的，这使用户可以更轻松地执行手势，例如点击小屏幕设备。
与FLA网站相比，Dorigati在导航菜单上的设置有点复杂。当用户浏览诸如计算机的大屏幕时，导航菜单将水平排列在网站上;如果屏幕较小，导航菜单将以两行显示在用户面前（如上所示），这有点像网格系统;当网站需要适应960px断点时，导航菜单的布局将从水平变为垂直，出现在网站的侧面，徽标将相应地改变位置;如果断点较小，导航菜单将隐藏到汉堡图标。在，它出现在页面的顶部。这种方法听起来很麻烦，但它是一种实用的解决方案，允许网站为不同设备的用户提供自然，友好的浏览体验，同时确保适当的空白区域。
更加关注垂直方向的留白
过去，在设计计算机桌面网站时，我们经常注意到网站上不同元素的水平间距。但是当我们开始为响应式网站安排空白时，我们应该更多地关注元素的垂直距离。这是因为手机屏幕通常是垂直的。如果不注意元素的垂直间距，就会影响手机等小屏幕上各种元素的显示，影响视觉效果的外观。此外，垂直空白区域或空白区域也决定了移动设备（如移动电话）上网站的加载速度。让我们让栗子证明吧！
下面的图片显示了手机屏幕上的Jisc网站，由于网站设计师在字体，图片和其他元素之间留出了一定的空间，因此看起来更舒服。 Jisc网站在桌面上呈现时会有很多水平方向的块。事实上，下图中的共享服务和部门交易是并列关系。它们在计算机屏幕上水平呈现，但设计师不仅关注水平方向。间距，同时还考虑到网站在小屏幕上的垂直习惯，使网站更清晰，更具可读性。
网站上的空白也可以划分不同块的边界，并为用户提供一些喘息空间。 Mashable的博客使用负空间来做到这一点。 Mashable将在计算机上显示为3列：小图像+文本，中间图像+文本，大图像+文本，如果以这种方式在手机上显示，则可能很糟糕。然而，设计师考虑了手机的垂直屏幕，在不同元素的垂直方向留下足够的空间，使不同文本块之间的界限清晰可见，界面更简洁。
因此，当我们设计响应式网站的空位问题时，记住不要总是从元素的水平方向开始，还要考虑不同元素和垂直方向上不同块的间距和距离。毕竟，所有元素都在小屏幕上。所有这些都倾向于垂直显示，以便他们真正在响应式网站中发挥作用。
字体和间距
在响应式网站中做好空白区域还需要面向文本的字体。除了改变字体的大小，我们还可以调整行高，字距，颜色甚至两个文本块之间的距离，使文本更容易阅读，图片看起来更和谐。
当计算机上显示“下一页”页面时，标题和导航菜单之间留下的空白区域很大，但是当在移动设备上显示时，空白区域会缩小（请参见下图），并且字体会显示在空白区域中。标题TNW文本减少。小，图片下方文字段落之间的间距已经放大，这是TNW根据自身特点合理利用白色空间的体现。
阿格拉文化网站也是如此，每个图像上的文字都被暂停。但是，由于浮动效果无法在手机和其他设备上显示，阿格拉文化在小屏幕上果断地放弃了这种特殊效果，因此文本直接出现在图片的中心。虽然这种变化不大，但它保证了用户的舒适体验。
重新调整图片
响应式设计经常涉及一个大问题，即图片。当使用网站上的空白区域时，我们还需要考虑图片的合理放置方式。由于大多数显示器都是宽屏，因此许多网站都使用宽屏图像。这也意味着我们需要缩小图像或在移动设备上显示时重新定义图像大小。看看下面的栗子是否可以给你一些灵感！
当UPP Broadgate Park网站显示在计算机桌面上时，主页上会出现幻灯片放映，当设备的分辨率小于500px时，它将显示为扩展图片（如下所示）。虽然图片延长了，但设计师在设计时仍然关注垂直空间问题，删除不必要的元素，使网站看起来更简洁明了。然而，要实现这一点真的很难，因为你需要知道图像的大小和每个图像的实际值，以便正确地重新定义图像大小，但如果你愿意做出这样的努力，小飞认为这绝对是值得的。
黄金群岛是另一种情况。网站设计师认为计算机桌面上的幻灯片在移动设备上没有多大意义，因此为了清晰起见，他们直接隐藏了图片。同时，水平导航菜单垂直排列两列以填充一定的空间，使网站不空和空。
许多设计师认为网络空间本质上是有限的，并且通过有限的空间传递尽可能多的内容是最重要的。事实上，更多的内容对用户来说不一定是好事，但它可能会干扰用户。在做网站时，要牢记少即多的原则，学会用空白给网站带来独特的美感和强大的表现力。在响应式网站中使用它！
小飞也有一个好消息告诉你，起飞页（http://www.qifeiye.com/?t_wd=a5）的自支撑平台的许多模板都利用了白色空间的艺术。该网站看起来更简洁，有禅宗。含义。另外，上面导航菜单的导航总结，重点是垂直方向，白色空间，调整字体和间距，重新定义图片等建议，可以满足起飞页面自助站平台。您可以使用您的起飞页面使您的网站在PC和移动设备上看起来与众不同。然而，小飞还提醒你不要为移动网站做太多优化，所以最好单独做一个移动网站，我们主张基于响应式网站进行微调。来到起飞页面自助平台，成为一个快速响应的网站！