响应式UI在断点处添加内容

Question

我正试图找出在屏幕变宽时添加内容的最佳做法。

许多响应式指南展示了如何使用媒体查询重新排序项目并使其更大或不同地设置内容的样式。

但是，如果我希望在视口变大时在屏幕上显示更多内容呢？

Bootstrap 4有Responsive utilities，可以隐藏特定断点处的项目。但感觉不对。物品只是隐藏的。

然后有新的Angular Flex Layout，您可以让代码响应断点事件。这听起来像是一个解决方案，但必须有另一种方法来解决这个问题。

我决定使用ngIfMediaQuery这是window.matchMedia API的薄包装，非常易于使用。

<div *ngIfMediaQuery="'(min-width: 500px)'">
    ...
</div>

Answer 1

我认为大多数人使用相当于Bootstrap的show / hide实用程序，因为它很简单，并且设计师和前端开发人员很容易理解。不过，你是对的;它装载客户不需要的东西。它可以用于切换背景图像URL，但不是其他任何东西。

在前端js上，只有在检查视口大小或用户代理之后，您才可以ajax或以其他方式请求脚本，样式和内容。例如，ajax在那个华丽的侧边栏标签 - 云中，将它放在一个根据视口大小运行或不运行的函数中（并重新检查视口事件）。这可能是最灵活的方法，并且可以像您想要的那样简单或复杂 - 尽管它永远不会像将hidden-xs放入标记那么简单。

您可以在后端与前端脚本设置会话/ cookie参数的同时完成此操作。据我所知，没有标准的方法可以实现这一点，而且它对视口变化的反应明显较少，例如在横向/纵向之间切换。亚马逊这样做，我很确定它基于用户代理。

所有这一切的一个重要考虑因素是SEO。你想确保谷歌没有面对js而没有别的东西。 They wrote a nice article on all of this，您应该阅读它。例如，如果您要根据用户代理提供不同的js，他们建议您添加一个HTTP标头，告知Google尝试使用不同的用户代理抓取该网站。