Question

现在我有一张长而宽的桌子。它占据了网格中的所有16个位置，并且在桌面上看起来不错。但是，当我在移动设备上查看时，它会拉伸整个页面。我似乎不明白如何使其具有响应性，因此它适合移动视图。

有人对此有经验并能做到吗？

Answer 1

您可以使用“响应式”标记使您的页面对每种工具都具有响应性。像这样：

const App = () => (
  <Container>
    <Table>
      <Table.Body>
        <Table.Row>
          <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
            Foo
          </Responsive>
          <Table.Cell>Bar</Table.Cell>
          <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
            <Responsive
              as={Table.Cell}
              minWidth={Responsive.onlyMobile.minWidth}
            >
              Baz
            </Responsive>
          </Responsive>
        </Table.Row>
      </Table.Body>
    </Table>
  </Container>
);

Answer 2

即使在考虑此问题的技术方面之前，您也需要考虑您想要获得的用户体验-这取决于您要呈现的数据的性质以及如何将数据有意义地呈现给用户。换句话说，在着眼于实现该设计的技术方面之前，有一个艰巨的设计挑战需要解决。

假设您的表格是关于经济数据的，列标题为20种不同的经济统计数据，每月记录为600行，那么您希望用户最初从移动设备访问您的网站时看到什么？您可以将巨型桌子分成几个较小的桌子，以便在手机上查看吗？

看看其他网站如何解决了这个问题。一个很好的例子是https://tradingeconomics.com的首页。

在Macbook Pro上进行完整查看时，此页面显示十二列数据（GPD，利率，...，人口），每个国家/地区显示一列。当您缩小浏览器窗口的范围（即模拟iPad或iPhone之类的移动设备）时，各个列会逐渐下降-从12下降到10，然后下降到4。它们显示在单独的表格中。

还需要注意的另一件事是明显使用了“更多”按钮来显示整个行集（国家列表），这样一来，最初向移动设备上的用户提供可管理的行数。 / p>

这些年来，我看过许多很棒的网站和书籍（例如，有关数据表和UX的书籍），它们讨论了其他人如何解决您现在遇到的同类问题，但是我不会提出任何建议。方法将取决于您的设计需求。

一旦您了解了其他网站如何解决设计问题（给定了它们的特定数据），那么如何实现此技术问题（例如通过语义UI CSS主题或其他技术）就更容易定义。

如何在Semantic-UI-React中使表响应？

2 个答案: