我正在尝试找出在屏幕变宽时添加内容的最佳做法。
许多响应式指南展示了如何重新排序项目并使其更大或使用媒体查询以不同的方式设置内容。
但是如果我想在视口变大时在屏幕上显示更多内容怎么办？
Bootstrap 4 有 Responsive utilities 可以隐藏特定断点处的项目。但是感觉不对。项目只是隐藏的。
然后是新的 Angular Flex Layout，您可以在其中让代码响应断点事件。这听起来像是一个解决方案，但必须有另一种方法来处理这个问题。
我决定使用ngIfMediaQuery，它是window.matchMedia API 的精简包装，非常易于使用。
<div *ngIfMediaQuery="'(min-width: 500px)'">
...
</div>
【问题讨论】：
我认为大多数人都使用相当于 Bootstrap 的显示/隐藏实用程序的工具，因为它很简单，而且设计师和前端开发人员很容易理解。不过，你是对的；它正在加载客户不需要的东西。它确实适用于切换背景图像 URL，但实际上没有其他任何东西。
在前端 js 上，只有在检查视口大小或用户代理后，您才能使用 ajax 或以其他方式请求脚本、样式和内容。例如，通过将 ajax 放在一个根据视口大小运行或不运行的函数中（并重新检查视口事件），在华丽的侧边栏标签云中实现 ajax。这可能是最灵活的方法，可以简单也可以复杂，但绝不会像将hidden-xs 放入标记中那么简单。
您可以在后端配合前端脚本设置会话/cookie 参数来完成此操作。据我所知，没有标准的方法可以实现这一点，而且它显然对视口变化的响应速度较慢，比如在横向/纵向之间切换。亚马逊就是这样做的，我很确定它是基于用户代理的。
所有这一切的一个重要考虑因素是 SEO。你想确保谷歌没有得到一个满脸的 js 和别的什么。 They wrote a nice article on all of this，你可能应该去阅读它。例如，如果您要基于用户代理提供不同的 js，他们建议添加一个 HTTP 标头，告诉谷歌尝试使用不同的用户代理抓取网站。
【讨论】：