css - 为什么 flexboxgrid 有媒体查询？

Question

我正在阅读 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 相同，为什么将其包装在媒体查询中？

Answer 1

包裹在媒体查询中的 css 使您对每个屏幕分辨率都有不同的行为。这就是响应式设计的漏洞本质。

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