为啥 flexboxgrid 有媒体查询？

Posted 2023-03-06

【中文标题】为啥 flexboxgrid 有媒体查询？

【英文标题】：Why does flexboxgrid have media queries?为什么 flexboxgrid 有媒体查询？

【发布时间】：2017-03-26 07:26:57

【问题描述】：

我正在阅读flexboxgrid 的源代码，我碰巧注意到了这一点。

col-xs、col-sm和col-lg的常用样式是一样的：

.col-xs,
.col-xs-1

  box-sizing: border-box;
  flex: 0 0 auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;

每一个.col-[gridSize]-[columnSize]的风格不变，只要我们只改变gridSize：

.col-xs-1 
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;


.col-md-1 
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;


.col-lg-1 
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;

.col-[gridSize]-offset-[offsetNum] 类似：

.col-xs-offset-1 
  margin-left: 8.33333333%;


.col-md-offset-1 
  margin-left: 8.33333333%;


.col-lg-offset-1 
  margin-left: 8.33333333%;

唯一的区别是xs 不包含在媒体查询中，而sm 和md 则包含在media queries 中。我正在将此库转换为 css-in-js，如果 css 相同，为什么要将其包装在媒体查询中？

【问题讨论】：

我对 flexboxgrid 的了解不多，但很可能xs 不在媒体查询中，因为它可能是一个移动优先的框架，就像 Bootstrap 一样。一般的想法是，您根据它在移动设备上的外观来制作您的设计，然后围绕它开始构建（这就是为什么它被称为移动优先）......而不是反过来，从桌面到移动。跨度>

我觉得这不需要答案，您可以查看mobile first，如果您有任何疑问，我们随时为您提供帮助。

@Ricky_Ruiz 我读到% 元素的工作基于父级的宽度，如果屏幕或容器在rem 中定义，则它可以是占据整个宽度的容器流体。你能告诉我更多关于.col-sm-1 与.container 交互的信息吗？rem 中使用媒体查询固定宽度？

flexbox 网格背后的思想与 Bootstrap 相同，网格由 12 列组成。 col-sm-1 代表容器总宽度的1/12。容器在媒体查询中应用了固定宽度，以便能够以margin-left 和margin-right auto 将内容居中。如果容器的width 是1000px，col-sm-1 将占该值的 8.34%~。 83.34px~..rem 单位只是从html 中取font-size 的值。

@Ricky_Ruiz 到目前为止这么好，这是否意味着为了获得媒体查询中定义的容器宽度的 8.34%，col-sm-1 必须在同一媒体查询。如果我在媒体查询中设置容器宽度但没有在媒体查询中定义 col-sm-1 会发生什么。它还能正确拾取容器宽度吗？还是我只是想多了？

【参考方案1】：

包含在媒体查询中的 css，以便您对每个屏幕分辨率都有不同的行为。这就是响应式设计的精髓。

xs 类不包含在媒体查询中，因为它们的样式将适用于所有屏幕宽度，除非没有任何其他尺寸标签（sm、md、lg）。