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

Question

在Foundation Zurb 5中，有没有什么现成的Tablet Portrait网格类？我注意到只有三个类(small，medium，large)。如果我想要在Medium (平板电脑)画像中有单独的布局，而不在css文件中编写特定的媒体查询，该怎么办？我想要这样的东西(它使我的程序员非常容易)：

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

如果我能使用基础设置文件(SASS)生成这些类，我将不胜感激。

谢谢,

Answer 1

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

这里是doc

<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

要做到这一点并不容易。如果您想花时间创建自己的自定义网格，只需根据自己的喜好复制foundation/components/_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>

我刚刚开始尝试这些类，所以在不同的设备上可能会有一些问题。