平板肖像的基础网格类

在Foundation Zurb 5中，是否有适用于平板肖像的准备好的网格类？我注意到，只有三个类（小，中，大）。如果我想在中等（平板电脑）纵向上单独布局而无需在我的css文件中编写特定的媒体查询呢？我想是这样（这使得很容易我的程序员）：平板肖像的基础网格类

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

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

感谢，

来源

2014-12-04 Jimba Tamang

您可以将元素添加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只显示你的模块将visibled用于肖像显示

然后，您添加您的自定义类（前中等肖像-11）和在CSS中编写你的风格

来源

2014-12-04 12:13:49 general03

我不想看到可见的东西。我想要网格。假设我想在Tablet Landscape中使用grid-6，在Tablet Portrait中使用grid-12。像小12，大6。 – 2014-12-05 12:26:01

上面的代码是一个根据attributs显示/隐藏单元格元素的网格（例如：show-for-medium或show-for-portrait），我没有看到您的问题 – general03 2014-12-05 12:41:03

我不想显示/隐藏细胞/列。所有我想要它，如果在中等景观中有两列，那么我想在中等人像中制作单列而不用在css中写任何东西。 – 2014-12-06 23:38:10

没有办法轻松完成这件事。如果您想花时间创建自己的自定义网格，只需复制foundation/components/_grid.scss和mod即可。但是，您需要为该范围创建一个自定义媒体查询。

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

一种简单的方法可以进行与过去相同的调整，即使用可见性类。好处是原型快，而不好的一面是它会导致重复的内容。

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

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

</div>

来源

2014-12-09 16:09:31 JAMESSTONEco

我不知道，如果你已经整理了这一点，但我有一个快速浏览一下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>

我刚开始使用这些类实验所以可能会有一些跨不同设备的问题。

来源

2015-03-01 00:35:29 Brendan

这可能会有所帮助，我会稍后看到它。谢谢。 – 2015-03-02 02:52:38

平板肖像的基础网格类

回答

相关问题