我正在建立一个响应式网站，我有一个新闻栏目。根据访客的屏幕尺寸，此部分包含2,3或4个新闻。目前，cms（modx）总是提供4个新闻项，如果用户应该有一个小视口，我会用媒体查询隐藏额外的新闻项。
这看起来效率不高（它为小屏幕用户使用额外的带宽）。同样使用上述方法我遇到了“更新的帖子”，“旧帖子”类型导航（因为单击“旧帖子”将始终加载4个旧帖子，而有些人可能只需要2或3）。
有更好，更可靠的方法吗？是否有可能使新闻的服务更具响应性？换句话说：如何根据屏幕尺寸防止下载不必要的内容？
答案 0 :(得分：3)
一种方法是采取相反的路线来做你正在做的事情：仅用1个新闻项生成页面，然后在必要时填充更多（而不是用4生成然后隐藏它们）
您可以检测用户的视口是否允许使用JS创建更多故事，然后使用ajax获取它们（在此期间可能还有'加载更多..'动画）。
这样一来，移动用户就不会将他们的带宽用完，而且对于非JS用户来说，它也会降级为1个新闻故事（你还可以为非JS用户提供大型视口，点击“点击更多”链接）