结合 Susy at-breakpoint() 和设备方向媒体查询答案

【问题标题】：Combining Susy at-breakpoint() and device orientation media queries结合 Susy at-breakpoint() 和设备方向媒体查询
【发布时间】：2013-10-11 02:38:33
【问题描述】：

我对 Susy 和响应式设计比较陌生。我已经设法设置我的网格并使用 at-breakpoint()，我首先通过在调整浏览器窗口大小时对其进行测试，然后在实际的移动设备（手机和平板电脑）上对其进行测试，从而使页面完全响应.我遇到了 iPad 的问题，因为在媒体查询中需要额外的方向规则（方向：横向）。这里有什么解决方法，有没有办法将它包含在断点规则中，或者我必须为这种情况编写一个单独的媒体查询？

这是我的网格设置：

$total-columns: 4;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width/2;

// alternative layout breakpoints

$tablet-small: 6;
$tablet: 8;
$computer: 12;

在处理侧边栏和页面正文时，首先我将它们显示为块元素以水平填充整个页面，然后在断点之后将它们表示为如下所示的列：

#sidebar {
    @include at-breakpoint($computer) {
        @include span-columns(3, $computer);
    }
} // sidebar

#page-body {
    @include at-breakpoint($computer) {
        @include span-columns(9 omega, $computer);
    }
} // page-body

我应该如何更改代码以保留断点的变量并仅添加方向规则？谢谢！

【问题讨论】：

$container-style: 变量的值是多少（在 _base.scss 中？）？体液？还是魔法？
您是否要在 ipad 上强制横向？ susy 的工作方式基本上都是关于屏幕或窗口的宽度，因此允许用户以任何他们想要的方式定位设备。或者您只是希望 ipad 在横向查看全宽块样式，而在纵向查看列模式？
Sass 允许您嵌套媒体查询（使用“and”创建一个查询）。因此，您可以简单地将方向嵌套在断点内，反之亦然。也就是说，我认为你可能会更好地使用这样的东西：github.com/scottjehl/iOS-Orientationchange-Fix 来解决方向更改错误。然后，您可以根据宽度更广泛地保留布局控件。

标签： susy-compass

【解决方案1】：

如果您想针对特定设备，我认为最好指定宽度。

所以$computer: 12; 可以代替$computer: 48em 12;

一旦达到min-width: 48em;，它就会将布局更改为 12 列网格。

【讨论】：

对不起，我有点迷路了。如果我向断点添加宽度，我会收到此错误：（_functions.scss 的第 21 行：(48em 12) 不是 `round' 的数字）
我不确定你的第 21 行是什么，但如果你使用$computer: 48em 12，你就不能使用@include span-columns(9 omega, $computer);。将其更改为@include span-columns(9 omega, 12);。这可能是您的错误消息的原因。

【解决方案2】：

这样的东西应该可以工作：

$device-lrg-landscape: max-device-width 480px, orientation landscape


@include breakpoint($device-lrg-landscape)

【讨论】：