1

我对 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

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

4

2 回答 2

1

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

所以而不是$computer: 12;也许做$computer: 48em 12;

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

于 2013-03-26T05:19:06.507 回答
0

像这样的东西应该工作：

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


@include breakpoint($device-lrg-landscape)
于 2013-03-27T18:52:25.043 回答