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

我对Susy和响应式设计比较陌生。我设法设置了我的网格并使用了at-breakpoint（），我通过在调整浏览器窗口大小的同时测试它，然后在实际的移动设备（手机和平板电脑）上测试它，。我在iPad上遇到问题，因为在媒体查询中需要额外的定位规则（方向：风景）。这里有什么解决方法，是否有办法将它包含在断点规则中，或者我必须为这种情况组成一个单独的媒体查询？结合Susy at-breakpoint（）和设备方向媒体查询

这是我的网格设置：

$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

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

来源

2013-03-26 george.b

请告诉我$集装箱式的值：变量（在_base.scss？）？流体？还是魔法？ – greyman 2013-03-26 08:48:57

你是否试图在iPad上强制横向？ susy的工作方式基本上都是关于屏幕或窗口的宽度，这样用户就可以根据自己的需要定位设备。或者，你是否只想让ipad在横向模式下查看全宽度块样式，而在纵向模式下是否需要列模式？ – greyman 2013-03-26 08:59:04

Sass允许您嵌套媒体查询（使用“和”创建一个查询）。所以你可以简单地在断点内嵌套方向，反之亦然。也就是说，我认为你可能会用这样的方式变得更好：https：//github.com/scottjehl/iOS-Orientationchange-Fix来解决方向更改错误。然后，您可以根据宽度更宽广地保持布局控件。 – 2013-03-26 17:23:48

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

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

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

来源

2013-03-26 05:19:06 Zendy

对不起，但我有点失落。如果我给断点添加一个宽度，我得到这个错误：（_functions.scss的第21行：（48em 12）不是'round'的数字） – 2013-03-26 05:31:54

我不确定你的行21上有什么，但是如果你做'$ computer：48em 12'，你不能做'@include span-columns（9欧米茄，$电脑）;'。将它改为'@include span-columns（9 omega，12）;'。这可能是你的错误信息的原因。 – Zendy 2013-03-26 05:46:15

这样的事情应该工作：

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


@include breakpoint($device-lrg-landscape)

来源

2013-03-27 18:52:25

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

回答

相关问题