我想弄清楚随着屏幕变宽，添加内容的最佳做法。响应式用户界面在断点处添加内容
许多响应式指南显示如何使用媒体查询重新排列项目并使其变大或变为不同风格的内容。
但是，如果我想在视口变大时在屏幕上显示更多内容，该怎么办？
Bootstrap 4有Responsive utilities可以隐藏特定断点处的项目。但感觉不对。项目只隐藏。
然后，有新的Angular Flex Layout你可以让你的代码响应断点事件。这听起来像一个解决方案，但必须有另一种方式来处理这个问题。
我决定使用ngIfMediaQuery这是一个围绕window.matchMedia API的薄包装，非常易于使用。
<div *ngIfMediaQuery="'(min-width: 500px)'">
...
</div>
我想大多数人使用的引导的显示/隐藏公用事业等效的，因为它操作简单，且易于设计和前端开发者神交。尽管如此，你是对的。它正在加载客户端不需要的东西。它可以用于切换背景图片网址，但不是其他任何内容。
在前端js上，只有在检查视口大小或用户代理后，才可以ajax或以其他方式请求脚本，样式和内容。例如，通过将ajax放入一个根据视口大小运行或不运行的函数（并在视口事件中重新检查），可以在该华丽的侧栏标签云中使用ajax。这可能是最灵活的方法，并且可以像您想要的那样简单或复杂 - 尽管它不会像将hidden-xs放入您的标记那样简单。
您可以在后台使用设置会话/ cookie参数的前端脚本来完成此操作。据我所知，没有完成这个任务的标准方法，并且它显然不太适应视图更改，如在横向/纵向之间切换。亚马逊这样做，我很确定它基于用户代理。
所有这一切的一个重要考虑是搜索引擎优化。你想确保谷歌没有得到一张满脸的js而没有别的东西。 They wrote a nice article on all of this，你应该去阅读它。例如，如果您打算根据用户代理服务不同的js，他们建议添加一个HTTP标头，告诉Google尝试使用不同的用户代理来检索网站。