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

类似地

中等屏幕

大屏幕

P.S。图片是您提供的链接的屏幕截图（通过调整每个屏幕尺寸的浏览器）

Answer 2

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

网格系统将屏幕划分为12列，您可以提及移动设备，平板电脑和台式机中组件的宽度。 xs，sm，md，lg和xl的断点分别为576px，768px，992px和1200px。

您可以通过调整页面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) { ... }