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

React Flexbox Grid can be used to make your website responsive. It is derived from the grid system followed by Bootstrap.

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

您可以通过调整页面 window 的浏览器大小来查看差异 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) { ... }

Answer 2

假设我们的屏幕分为 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. 图片是您提供的 link 的屏幕截图（通过针对每个屏幕尺寸调整浏览器大小）

CSS Flexbox 系统中的 xs, md, lg 是什么意思？

What is the meaning of xs, md, lg in CSS Flexbox system?

css

flexbox

reactjs

react-flexbox-grid

同样