CSS Flexbox系统中的xs、md、lg是啥意思？

Posted 2023-03-06

【中文标题】CSS Flexbox系统中的xs、md、lg是啥意思？

【英文标题】：What is the meaning of xs, md, lg in CSS Flexbox system?CSS Flexbox系统中的xs、md、lg是什么意思？

【发布时间】：2017-09-12 17:22:07

【问题描述】：

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

【问题讨论】：

它衡量每个col 在不同屏幕尺寸上占用多少列空间。 xs -> 超小，sm -> 小，md -> 中，lg -> 大。看到每个size总计最多12（屏幕分成的列数）

谢谢，如果我按列加法，xs 列总和为24 而不是 12，这是否意味着 2 行？其中第 1 列占据整行，第 2 列和第 3 列分别位于第二行，宽度为 50%？

【参考方案1】：

假设我们的屏幕分为12 列。

xs 部分在屏幕超小时占用，类似地，small、medium 和 large 类也是如此，这取决于它们各自在 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.图片是您提供的链接的屏幕截图（通过调整每个屏幕尺寸的浏览器大小）

【参考方案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)  ... 

【讨论】：

谢谢，如果我按列加法，xs 列总和为 24 而不是 12，这是否意味着 2 行？其中第 1 列占据整行，第 2 列和第 3 列分别位于第二行，宽度为 50%？

是的。在您问题的代码 sn-p 中，xs 列将在您提到的小型设备中占用 2 行。

我希望我已经澄清了你的疑问

是的，你做到了！非常感谢