什么是XS，MD，LG在CSS Flexbox的系统中的含义是什么？

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>

我不知道什么是qazxsw POI，qazxsw POI和POI qazxsw是？可能有人请解释一下吗？

Answer 1

让我们假设我们的屏幕分为xs列。

该sm部分占用时，屏幕是超小型，类似的小，中，大班，以及基于CSS中各自的屏幕尺寸定义。

您提供的例子：

lg

为了我们的缘故让我们假设这三列被命名为12，xs和

<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占据了所有12列，它们的其余2个取6个（以每一个新行）col-2

在小屏幕上

col-3和col-1占用3，而中间的一个需要6 col-1

同样

中等屏幕col-3

大屏幕col-2

附：图片是你所提供的链接的截图（通过调整每个屏幕尺寸浏览器）

Answer 2

可以用来使你的网站响应。它是从电网系统随后而得。

网格系统将屏幕分成12列并且可以提多少宽度可以采取用于移动设备，平板电脑和台式机组件。对于，React Flexbox Grid，Bootstrap，xs和sm的断点576px，768px，992px和1200像素。

您可以通过调整页面md的浏览器窗口中看到了差距

它作为以下媒体查询相同

lg