平板肖像的基礎網格類

在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

平板肖像的基礎網格類

回答

相關問題