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）。

为什么flexboxgrid有媒体查询？

1 个答案: