css - SCSS 和 Susy : Different Layouts for Different orientations

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 主要用于以百分比设置列的宽度，这将使列灵活地适应视口(viewport)或外部容器的大小。我会使用 $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 文件中并且从不更改它 – 相反，我将@include span-columns( X )` 应用到我拥有的任何容器并调整我想要的列数它占用不同的媒体查询断点。

专门针对 iPad 不是非常友好的 future 或响应式网页设计的意图，但我相信你有你的理由。该评论更适合阅读此论坛的 RWD 新手。

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