如何使淘汰js模板css媒体查询意识

How would one make knockout-js templates css media query aware?

本文关键字：媒体 查询 意识 css 模板 何使 淘汰 js      更新时间：2023-09-26

我正在构建一个网站，我希望使用CSS媒体查询来响应。我还在客户端上使用Knockout js来模板化我的UI——它真的很快就用起来了。

我发现，例如，我需要渲染一些UI，这些UI是我在淘汰js模板中定义的。。。这导致一些DIV和SPAN为每个"列表项"呈现文本
当用户缩小屏幕时，布局会通过媒体查询做出响应，以"简化"用户界面——删除更详细的信息，为最重要的东西腾出空间。

我知道我可以使用css将我的标签"分组"为"详细级别"，然后使用媒体查询关闭"更高级别的详细级别"以减少屏幕空间-这将有效地使某些HTML元素不可见。

然而，我的模板变得非常复杂，非常快，因为仅仅关闭div可能是不够的。在我看来，我可以定义一个模板，它将包括一个css媒体查询"规则"，这样当用户更改浏览器大小时，模板实际上被交换了。这将导致更干净的HTML模板和更少复杂的CSS。

所以，我的问题是——有人考虑过这个问题吗，也许通过一些最佳实践解决了它——也许我在KnockoutJs中缺少了一些可以帮我解决这个问题的功能？

非常感谢！

我认为最好的方法是关注$（window）.调整大小（如果你使用jQuery），在初始加载时检查页面的尺寸，并设置一些基本的可观察值，告诉你应该处于哪种响应模式。

类似于：

var layoutType = ko.observable('normal');
$(window).resize(function() {
  if ($(window).width() > 900)
    layoutType('normal')
  else if ($(window).width() > 500)
    layoutType('compact')
  else
    layoutType('compressed')
});
$(document).ready(function() {
  $(window).resize()
})

然后，您可以根据基本可观测值创建计算的可观测值，这些可观测值可以根据布局类型采取适当的操作。

您还可以观察一些CSS标记，例如，一些将以较小尺寸消失的元素。

相关文章：