Question

我正在建立一个网站，我希望使用CSS媒体查询来表现responsively。我也在使用Knockout-js在客户端上模拟我的UI - 它真的很快就可以使用了。

我发现的是，我需要渲染一些我在knockout-js模板中定义的UI ...这导致一些DIV和SPAN为每个'list item'呈现文本。<登记/> 当用户缩小屏幕时，布局会通过媒体查询响应“简化”用户界面 - 删除更详细的信息，为最重要的内容腾出空间。

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

然而 - 我的模板变得非常复杂，非常快 - 因为简单地关闭div可能还不够。在我看来，我可以更有意义地定义一个模板，它将包含一个css-media-query'规则'，因此当用户改变浏览器大小时，模板是实际上交换了。这将导致更清晰的HTML模板和更简单的CSS。

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

非常感谢！

Answer 1

充其量，我认为去这里的方法是留意$（window）.resize（如果你使用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()
})

然后，您可以基于可以根据布局类型采取适当操作的基本observable创建计算的observable。

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

怎么会让knockout-js模板css媒体查询意识到？

1 个答案: