css - 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是？有人可以解释一下吗？smlg

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、和的断点是 576px、768px md、992px 和 1200px。lgxl

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