3

我正在创建两种不同的布局：一种用于横向，一种用于纵向。横向布局具有更宽的列。我正在使用新版本的 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 文档有一整节是关于响应式网格的，但它有点复杂，并且没有讨论方向。我之前也问过这个问题，但是解决方案不起作用（我认为是因为解决方案是针对旧的 Susy 版本）。

感谢您提供的任何帮助！

4

1 回答 1

2

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 新手。

为了更好地嗅探设备，您可能需要检查用户代理字符串。这个问题也有一些不错的想法：一个可靠的媒体查询，只检测 iPad（或最好是 1024x768 移动设备）

于 2013-02-12T20:43:17.843 回答