Question

这个问题只涉及原型设计;我知道可以通过（S）CSS使用语义网格类来完成，但我指的是Zurb Foundation的基于html的非语义网格类。

我正在尝试做这样的事情 - 为什么它似乎不起作用？

<div class="medium-portrait-4 medium-landscape-7">...</div>
<div class="medium-portrait-8 medium-landscape-5">...</div>

Answer 1

从Zurb Foundation v5.3.0开始，如上所述，没有直接针对目标定向的包类。

但是，通过使用mixins，可以创建一个提供所需结果的自定义类，例如我从a similar question on the foundation site复制的以下示例。

.class-name { 
  @media #{$small-only} and (orientation: portrait) { 
    @include grid-column(2);
  }
  @media #{$small-only} and (orientation: landscape) { 
    @include grid-column(4);
  }
 @media #{$medium-up} and (orientation: landscape) { 
    @include grid-column(6);
  } 
}

Answer 2

为此，我改变了_settings.scss中的断点：

small: 0,
medium: 750px,
large: 970px,
xlarge: 1170px,
xxlarge: 1440px,

当我使用小 col用于移动设备时，中等 col用于平板电脑纵向，大 col用于平板电脑风景

它完成工作

你如何针对Zurb Foundation基于html的网格类中的不同方向？

2 个答案: