Kendo Angular 网格响应式设计

Question

我将 Kendo 用于 Angular，并希望提高我的应用程序在较小屏幕上的响应能力。我发现 this which describes how to make items a listview. I also found this 告诉我们如何在较小的屏幕上隐藏列。

这些都可以，但我真正想做的是将所有列都显示在更大的屏幕上，但是当屏幕足够小以至于网格不再真正可读或有效时，切换到列表视图，它可以在其中垂直显示 'cards' 个项目及其属性。执行此操作的最佳方法是什么？

Answer 1

仍然不确定为什么投反对票，但如果其他人遇到这个，我最终会这样做。

基本上，据我所知，您必须创建 2 个网格才能执行此操作，并根据 css 中的媒体大小进行可见性设置。我基本上从问题的两个链接中放入了两个网格，然后制作了 2 个类，分别称为 smallGridContent 和 largeGridContent。 Small 是小屏显示（列表视图），large 是大屏显示（全格）。然后我制定了这些 css 规则，通过 1000 像素屏幕宽度的可见性来交换它们：

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

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

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

Kendo Angular 网格响应式设计

Kendo Angular Grid Responsive Design

kendo-ui

angular