但是，该主题非常详细，并且会分解为许多子主题，其中之一是响应式布局的视觉组织 。
在最近的一篇文章中 ，我讨论了视觉内容如何与布局设计相关 。
在UI＆UX设计中，每个项目都没有一个正确的答案，但是存在一些行之有效的趋势，从这些趋势中您可以构建自己的想法。
在本文中，我想更深入地研究响应式内容，以了解一些针对较小屏幕重新排列内容的最佳实践。
重新排列网格到列表
最好的解决方法是在较小的屏幕上分解这些网格，然后将项目转换为list 。
实体网格中的内容通常在较宽的显示器上水平组合在一起，但这在较小的设备上没有意义。
每个网站都使用某种类型的网格，无论它是否可见 。
示例1：惠灵顿市议会
查看惠灵顿市议会的网站，该网站的主页上使用了许多网格样式的部分 。
页脚节也变小 ，最终转换为垂直链接列表 。
正方形链接的幻灯片很小，随着浏览器窗口大小的变化而减小 。
如果是iPhone，设备的高度要比宽度大，因此以这种方式排列内容是有意义的。
在宽度为320像素的超小型手机上，您需要针对设备尺寸进行设计。
示例2：Mooyah汉堡
桌面屏幕上有一个小的幻灯片显示区域，其中包含三个项目，但此区域会缩小以仅在移动设备上显示一个项目（向小部件添加更多隐藏的幻灯片）。
查看Mooyah的主页 ，然后尝试调整布局大小。
在Mooyah应用程序和菜单上做广告的两个促销框保持并排固定， 直到屏幕变小到可以垂直重新排列它们为止 。
一般来说，宽屏显示器是最宽的，而智能手机屏幕是最高的。
本部分还重新安排了内容，以便每个社会职位都有尽可能多的空间 。
“与我们联系！”
示例3：主题市场
这样，您将准备建立有意义的断点 。
在设计带有网格的布局时，在编写一行代码之前，应同时考虑宽和高布局样式 。
例如， 主题市场的固定最大宽度为1240，并且网格每行包含四个块 。
具有完整网格布局的页面应先减小框的大小，然后再将它们分成新的一行。
以最小的尺寸，您每行可以得到一个盒子，并且有足够的空间容纳文本和图像。
随着屏幕变小，这些块的宽度减小 ，但最终分解成每行留三个盒子 。
构建网格布局的次数越多，就越容易找到内容安排的这种平衡 。
始终保持尽可能多的信息可见性与使文本可读的需求之间的平衡。
隐藏或删除列
我经常看到三列或四列的博客占据了屏幕的很大一部分。
更大的 监视器和更多的浏览器支持使开发人员可以构建极其复杂的布局。
我发现了两个用于处理过多侧边栏的选项：
但是，较小的设备需要垂直方向有意义的内容流。
- 将它们放在主要内容之下
- 完全隐藏它们
示例1：停止按
我的台式机显示器上有四个垂直列 。
看一下Stop Stop网站。
然后，我们有两个不同的侧边栏列，上面充斥着额外的“旁边”内容。
左列是垂直导航菜单，下一列是包含最新文章的主要内容列。
首先去的是左侧导航，该导航隐藏在汉堡菜单图标的后面。
当浏览器窗口调整大小时，这些列的大小逐渐减小 。
然后最后在最小的屏幕上，最右边的侧栏完全消失，仅留下内容的主要中心列 。
下一个断点隐藏中间的列以及顶部的社交共享按钮。
它是完全看不见的 ，这是减少页面加载并使滚动条高度保持适当大小的完美选择。
侧边栏内容均不会显示在主要内容下方。
另一方面，许多博客的确将侧边栏移到主要内容下方，例如在概念艺术帝国上 ，侧边栏中的相关帖子最终落在内容下方 。
示例2：Wishpond博客
这些内容都不是至关重要的，但可以为访问者增加价值。
该侧边栏区域通常包含广告，注册表单和相关的帖子链接。
Wishpond博客还完全从较小视口的屏幕上删除了侧边栏 。
我喜欢遵循一种混合方法 ，在该方法中 ，将侧栏移动到内容下方，但也将侧栏中的一些项目隐藏到某个断点之后。
这使得侧边栏内容可访问，但不会使过多的内容弄乱页面 。
例如，如果我在完整版式中有三个广告块，则可以在移动设备上隐藏其中两个广告空间。
示例3：高铁夫人
最终，它下降到内容之下 ，并占据页面上的完整视图位置 。
我也喜欢Gautier女士如何在主页上使用其“最新新闻”侧边栏。
无论是站点范围的侧边栏还是仅显示在页面模板上的东西， 并排设计样式都很流行，因为它适合屏幕上的更多内容 。
几乎每个网站在设计中都会至少有一个侧边栏。
但是，您应该根据侧边栏的相关性及其与页面的必要性来进行选择。
您可以将侧边栏降低至最低，完全隐藏或将这两种技术结合使用。
您可以选择如何处理内容 。
调整和压缩边距
总会有一个点无法进一步压缩内容 ，并且一个部分需要降到另一个部分之下 。
通过在减少页面内容之前调整边距 ，可以为读者提供更广泛的内容选择。
示例1：一个世界
它的站点范围内的页脚链接向右浮动，左侧为电子邮件注册表单 。
一个世界的页脚就是一个很好的例子。
链接列靠得更近 ，注册表单也变小了。
随着布局调整大小，这些元素之间的边距和内边距会缩小。
超过特定点后， 将链接放在注册表单下方并为页脚留出足够的呼吸空间就很有意义。
是的，确实会使页面更长，是的，向下滚动所需的时间更多，但是在这些较小的断点处，您可以假定用户使用的是垂直设备 。
示例2：金岛
最终，它们从单行分成两行，然后分成最小的列。
调整浏览器窗口的大小时，导航链接会挤在一起 。
我喜欢的另一个示例是Golden Isles主页，它具有独特的导航样式 。
本示例演示了在完全重新布置布局之前调整边距大小的功能。
页面上的其他项目遵循相同的模式 。
较小屏幕上的垂直流
这包括段落，标题，块引用，无序列表以及自定义内容框。
这意味着您需要考虑页内内容块以相应地更新内容样式 。
页面内容应该自然流动 ，并且垂直对齐在移动设备上很有意义。
示例1：BodyBuilding.com单篇文章
以这个健美的帖子为例， 该帖子 使用小盒子展示不同的臀部锻炼。
在较小的屏幕上，这些缩略图会分解为新的一行 ，并最终堆叠在一起 。
这些框的右侧包括缩略图，以演示该练习。
您的响应式CSS应该在网站的每个页面上都考虑到这一微小的细节。
示例2：名利场
随着浏览器尺寸的减小，此热门新闻部分将变成滑动轮播 。
在全屏桌面上，故事会列出标题，并在侧面显示一个特色图片。
有关更大的示例，请查看名利场首页，该页面完全重新排列了精选故事滑块 。
他们的全屏文章列表更“垂直”，但是这种布局在移动屏幕上操作比较棘手，因此将其更改为滑动轮播是一个更好的选择。
界面本身通过为列表中的每个故事添加点导航，箭头和特色图像而完全改变 。
只需考虑如何以一种支持垂直浏览体验的方式来组织内容。
不必总是将内容强制在小屏幕上垂直放置。
多考虑用户流而不是内容流。
总结思想
每当我偶然进入一个无响应的网站时，我都会惊叹于该水平滚动条。
访客希望所有网站都适合移动设备 。
如今，响应式设计至关重要，每个Web设计师和开发人员都应了解其工作原理。
请遵循本文中的技巧来规划设计策略，以重新安排内容 ，以在所有设备上获得最佳的用户体验。
翻译自: https://www.hongkiat.com/blog/planning-content-responsive-design/