如何使用 susy 2 使某些 div 对不同纵横比的响应比其他 div 更灵敏

Question

由于解释起来有点困难，所以我做了一个模型来尽可能地直观地理解：

http://sassmeister.com/gist/70624a740b1ca4ae7764

（如果有更好的方法来分享一个 sass gist，请告诉我。第一次使用它）

基本上，这是我想要的横向模式平板电脑的布局。我要做的是确保它完全适合具有不同纵横比的不同平板电脑。有些事情是固定的。主要内容区域是 16x9 视频，因此该方面被锁定。

我现在已修复页眉和页脚（仅限主列），因为它们需要用于纵向模式，但如果它有助于平板电脑横向，我可以将它们带入常规流程。无论如何，它现在都是通过 susy2 进行的基本响应，并且侧边栏是完全独立的，因此它可以独立于主要内容滚动。我想要的是整个主要区域（包括页眉和页脚）与 vid 上方和下方的边距完美匹配，然后让侧栏列更改其宽度以匹配平板电脑。

所以...如果平板电脑更宽，预告片缩略图将变为 16x9 比例。如果数位板较窄，主列保持不变，但预告拇指会缩小为正方形。

如果首先弄清楚如何响应性地仅缩小右列会更容易，因此拇指的方面没有变化，那没关系。我只是不希望整体布局因为纵横比而在一个设备和另一个设备上搞砸了，所以主要关注的是页眉在顶部，页脚在底部，主视频完全适合它们，然后侧边栏响应填充其余的（在合理范围内）。

感谢任何输入。第一次在这里做网站，有很多东西要学。

ps。我为右列启用了垂直滚动，但禁用了它（通过向 scss 列中的滚动类添加额外的字母），因为它实际上并没有让我滚动。不确定这是因为没有实际内容，还是它没有将空的填充单元格识别为值得滚动的内容。

Answer 1

您为您的第一个网站付出了很多努力，但 Sassmeister 是展示您在做什么的好方法。我赞成。 :)

您会发现其中一个问题是 CSS 没有内置 aspect ratio 的概念，因此您尝试的那种布局并非易事。 CSS 最擅长处理宽度，并让所有内容垂直溢出。需要一些努力才能很好地处理高度。

如果您可以摆脱它（取决于浏览器支持），您最好的选择是使用flexbox。 Flexbox 应该让这更容易，但还没有得到很多支持。你可以考虑table-cells，它有更多的支持，但可能更难控制。

在任何情况下，您都应该为此忽略 Susy 的大部分内容 - 至少在布置大部分时。如果您希望 Susy 帮助您进行网格计算，请放弃 mixins，而只需使用 span() 和 gutter() 函数来帮助您设置宽度。像这样的：

.flexbox {
  flex: 1;
  flex-basis: span(3);
}

.tables {
  display: table-cell;
  width: span(3);
}


// NOT THIS
.no {
  @include span(3);
}

您可以返回使用 Susy mixins 来获得更简单的部分，例如顶部导航中的项目。