Question

我正在使用Kendo for Angular，并希望提高我的应用程序在较小屏幕上的响应速度。我发现this描述了如何使项目成为列表视图。我还发现this可以告诉您如何在较小的屏幕上隐藏列。

这两种方法都可以，但是我真正想做的是将所有列都放在较大的屏幕上，但是当屏幕足够小以至于网格不再真正可读或有效时，请切换到列表视图可以在其中垂直显示单个项目的“卡片”及其属性。最好的方法是什么？

Answer 1

仍然不确定为什么要投票，但是万一其他人遇到了这个，我最终会做这件事。

据我所知，您基本上必须创建2个网格才能做到这一点，并具有基于CSS中媒体大小的可见性设置。我基本上从问题的两个链接中都放入了两个网格，然后创建了两个类，分别为smallGridContent和largeGridContent。小是小屏幕显示（列表视图），大是大屏幕显示（完整网格）。然后，我制定了这些CSS规则，以通过可视性（以1000px屏幕宽度）交换它们：

@media only screen and (min-width: 1000px) {
  .smallGridContent{
    display: none;
  }
}

@media only screen and (max-width: 1000px) {
  .largeGridContent{
    display: none;
  }
}

不确定这是最干净还是最好的方法，但是对我有用。如果有人有更好的解决方案，我将很乐意接受该答案。

Kendo角网格响应设计

1 个答案: