1

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

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

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

谢谢，

4

3 回答 3

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 编写样式

于 2014-12-04T12:13:49.973 回答
0

没有办法轻易做到这一点。如果您想花时间创建自己的自定义网格，只需根据自己的喜好复制基础/组件/_grid.scss 和 mod。但是，您需要为该范围创建自定义媒体查询。

Portrait Tablet (Medium) 视图总是很棘手。如果您想在投入时间并使布局复杂化之前进行此调整，请考虑有多少人访问您的网站。

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

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

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

</div>
于 2014-12-09T16:09:31.313 回答
0

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

@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>

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

于 2015-03-01T00:35:29.630 回答