Question

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

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

Answer 1

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

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

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

Answer 2

这样的事情应该起作用：

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


@include breakpoint($device-lrg-landscape)

结合Susy at-breakpoint（）和设备方向媒体查询

2 个答案: