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

Question

我正在开发一个使用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是什么？有人可以解释一下吗？

Answer 1

我们假设我们的屏幕分为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

同样

中等屏幕

大屏幕

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

Answer 2

React Flexbox Grid可用于使您的网站具有响应性。它源自网格系统，后跟Bootstrap。

网格系统将屏幕分成 12 列，您可以提及移动设备、平板电脑和台式机中的组件可以采用多少宽度。对于断点xs，sm，md，lg和xl是576px，768px，992px和1200像素。

您可以通过调整页面的浏览器窗口大小来查看差异https://roylee0704.github.io/react-flexbox-grid/

与下面的媒体查询相同

// xs --- Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// sm --- Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// md --- Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// lg --- Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// xl --- Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }