Question

我正在创建两种不同的布局：一种用于横向，一种用于纵向。横向布局具有更宽的列。我正在使用新版本的Susy来做这件事。

这是我的代码：

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
$total-columns  : 7;
$column-width   : 10.900em;
$gutter-width   : 2.80em;
$grid-padding   : 4.00em;

$show-grid-backgrounds  : true;
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
$total-columns  : 7;
  $column-width: 7.2em;
  $gutter-width: 2.8em;

  .container {
    @include container;
  }

}

但它不起作用。列保持相同的大小（较小的纵向大小）。我该如何解决这个问题？

我页面上的其他响应代码确实有效，它只是没有的网格！

Susy Documentation有关于响应式网格的整个部分，但它有点复杂，不讨论方向。我之前也问过this question，但解决方案不起作用（我认为这是因为解决方案适用于旧的Susy版本）。

感谢您提供任何帮助！

Answer 1

Susy主要用于以百分比设置列的宽度，这将使列灵活到视口或外部容器的大小。我会使用$container-style: fluid;设置告诉Susy使用百分比来表示宽度和边距。由于您没有更改列数 - 您只需要更改宽度 - 让宽度变得灵活。然后你的媒体查询几乎不得不改变。

这是我对12列网格的基本设置。

@import "susy";
$total-columns: 12; // Evenly divisible by 2, 3, 4 and 6
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid;

我将这些设置保存在我的_base.scss file and never change it – instead, I apply @include span-columns（X）中，放在我拥有的任何容器中，并调整我希望它在不同的媒体查询断点处占用的列数。

专门针对iPad并不是非常友好或响应式网页设计的意图，但我相信你有理由。对于读取此论坛的RWD新手来说，这个评论更多。

为了更好地设备嗅探，您可能需要检查用户代理字符串。这个问题也有一些不错的想法：A reliable media query to detect only iPad (or at best 1024x768 mobile devices)

SCSS＆amp; Susy：不同方向的不同布局

1 个答案: