平板电脑肖像的基础网格类

Question

在 Foundation Zurb 5 中，是否有适用于平板电脑肖像的现成网格类？我注意到只有三个类（小，中，大）。如果我想在中型（平板电脑）纵向中具有单独的布局，而无需在 css 文件中编写特定的媒体查询，该怎么办？我想要类似的东西（这对我的程序员来说很容易）：

.medium-portrait-12
.medium-portrait-11
.medium-portrait-10
.medium-portrait-9
.medium-portrait-8 etc.

如果我可以使用基础设置文件 （SASS） 生成这些类，我将不胜感激。

谢谢

Answer 1

您可以在元素上添加show-for-medium类，它仅在中等屏幕上可见

这里是文档

<div class="row">
  <div class="medium-2 large-4 columns">
    <p class="show-for-medium show-for-portrait medium-portrait-8">
      <!-- Template for medium-portrait-8 -->
    </p>
    <p class="show-for-medium show-for-portrait medium-portrait-11 ">
      <!-- Template for medium-portrait-11 -->
    </p>
    ...
  </div>
  <div class="medium-4 large-4 columns">...</div>
  <div class="medium-6 large-4 columns">...</div>
</div>

您可以添加show-for-portrait以仅显示纵向显示块

然后添加自定义类（例如 medium-portrait-11）并用 CSS 编写样式

Answer 2

没有办法轻松完成此操作。如果您想花时间创建自己的自定义网格，只需根据自己的喜好复制基础/组件/_grid.scss和mod即可。但是，您需要为该范围创建自定义媒体查询。

人像平板电脑（中）视图总是很棘手。如果您想在投入时间和使布局复杂化之前进行此调整，请考虑有多少人访问您的网站。

进行我过去使用的相同调整的一种简单方法是使用可见性类。好处是原型速度很快，缺点是它会导致内容重复。

<div class="show-for-portrait">
</div>
<div class="show-for-landscape">
</div>

Answer 3

我不确定你是否已经解决了这个问题，但我快速浏览了 SASS 文件并发现了几个有用的混音。这是你的意思吗？

@media #{$screen} and (orientation: portrait) and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)}) {
    @include grid-html-classes($size:medium-portrait);
    @include block-grid-html-classes($size:medium-portrait,$include-spacing:false);
}

因此，要在HTML中使用它：

<div class="row">
    <div class="columns small-6 medium-portrait-4 medium-3"></div>
</div>

（和块网格）

<ul class="small-block-grid-2 medium-portrait-block-grid-3 medium-block-grid-3">
    <li></li>
    <li></li>
</ul>

我才刚刚开始尝试这些类，因此不同设备上可能存在一些问题。