CSS Flexbox系统中xs,md,lg的含义是什么？

我正在使用React开发一个应用程序并想要设置组件样式,我发现 https://roylee0704.github.io/react-flexbox-grid/讨论了一个流体网格系统.该示例如下所示：

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

我不知道什么是xs,sm和lg是什么？有人可以解释一下吗？

我们假设我们的屏幕分为12列.

当屏幕超小时,xs部分占用,同样小,中,大类也基于CSS中各自的屏幕尺寸定义.

您提供的示例：

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

为了我们的缘故,我们假设这三列被命名为col-1,col-2和col-3

在一个额外的小屏幕上：

col-1占用了所有12列,其余两个占用了6列(在新行上)

在小屏幕上

col-1和col-3占3,而中间col-2占6

同样

中等屏幕

大屏幕

附：图像是您提供的链接的屏幕截图(通过调整每个屏幕大小的浏览器大小)