为什么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;
}

只要我们只更改gridSize，每个.col-[gridSize]-[columnSize]的样式就不会改变

.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)。