css - 在响应式网页设计中，如何确定嵌套列的断点？

Question

假设我有 2 列，比如 c1 和 c2，它们的宽度均为:50%。 c1 有 2 个嵌套列，c1-1 和 c1-2，宽度分别为 30% 和 70%。

假设c1-1的内容在至少150px宽度时显示效果最佳，即当此屏幕尺寸>=1000px时。在这种情况下，当嵌套列需要在父列之前中断时，您会怎么做？

我可以在max-width:1000px设置一个断点，并且设置c1-1和c1-2的width: 100%，然后在后面的断点，当c1和c2变为width:100%时，我将 c1-1 和 c1-2 重置为宽度 30% 和 70% ？

Answer 1

FWIW，我认为您应该从您希望页面内容如何在小于 1000 像素的视口(viewport)中显示的 Angular 来处理这个问题。

你提到的方法会给出:

| --- C1-1 --- | | --- C2-1 --- |
| --- C1-2 --- | | --- C2-2 --- |

另一种选择是在视口(viewport) < 1000px 处，将 C1 和 C2 定义为全宽，将嵌套列定义为 30% 和 70%，即

| - C1-1 - | | ----- C1-2 ------|
| - C2-1 - | | ----- C2-2 ------|

这看起来差别不大，但对于现实生活中的数据可能很重要。

比如，想必C1-2的内容比较重要。但在第一个示例中，它可以很好地向下推到页面下方。此外，第二种方法将使 C1 和 C2 内容在视觉上分组在一起。

祝你好运!