Zurb基金會 - 刪除中屏幕列

我有一個網站原型在Zurb基金會3，到目前爲止我有桌面版本，現在我調整它對平板電腦和手機負責。Zurb基金會 - 刪除中屏幕列

我正在努力的是這樣的：我有一行內容的列，我想刪除一些中，小分辨率的列。但是我希望其他列可以伸展到頁面寬度的其餘部分。我如何正確地做到這一點？

我使用

class="hide-for-medium-down"

隱藏元素，但如何包裝內容，以便一些元素是隱藏的，當它延伸？

我發現了兩個方法，但他們沒有工作： 1）我做它作爲標準的行列，如：

<div class="row"> 
    <div class="three columns">...</div> 
    <div class="three columns">...</div> 
    <div class="three columns hide-for-medium-down">...</div> 
    <div class="three columns">...</div> 
</div>

但在這種情況下，第三列將僅僅停留爲空的空間。

2）我可以使用塊網格這樣使它：

<ul class="block-grid four-up"> 
    <li>1</li> 
    <li>2</li> 
    <li class="hide-for-medium-down">3</li> 
    <li>4</li> 
</ul>

但此時第4列只是移動左側3TH的位置和第四空間將再次留空。

最近我得到的是使用移動-X補課調整電網有較小的列手機 - 這種方式：

<ul class="block-grid four-up mobile-three-up"> 
    <li>1</li> 
    <li>2</li> 
    <li class="hide-for-medium-down">3</li> 
    <li>4</li> 
</ul>

可惜的是，這僅適用於手機，但我不能這也適用於中等分辨率的平板電腦，因爲沒有相應的功能。

總的來說，我的問題是：解決這個問題的最好方法是什麼？在保持網格的同時，在小屏幕上隱藏元素的最佳方式是什麼？在保持電網正常工作的同時，甚至可以在中等屏幕上移除電網中的元件？

來源

2012-10-18 Ziki

這將需要自定義CSS。但是，你應該儘量少用這個技巧。隱藏內容列會使響應式設計變得非常重要。 http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid –

-1

這聽起來像你正在尋找CSS媒體查詢。我建議你閱讀以下頁面。

http://www.w3.org/TR/css3-mediaqueries/

也相當然後躲在內容，爲什麼不調整其大小，以便您的移動用戶還可以查看它，除非你覺得這是一個糟糕的設計選擇！

我希望有幫助。

來源

2012-10-23 10:21:09

賈斯汀 - 看看基金會由Zurb：http://foundation.zurb.com/ 這是一種先進的響應框架，廣泛使用媒體查詢。這個問題特別針對使用Foundation框架來更改列集的大小，而不僅僅是一個關於如何使用媒體查詢的問題。 – stevecomrie

我想出的最佳解決方案是在瀏覽器調整大小（或以特定大小加載）時使用jQuery對特定列進行一些更改。

類似於下面的內容（直接從我的項目文件中取出 - 因此您必須根據您的特定目的進行編輯）。

$(document).ready(function() { 
    check_column_size(); 
}); 

$(window).resize(function() { 
    check_column_size(); 
}); 

function check_column_size() { 
    if($(window).width() >= 768 && $(window).width() <= 800) { 
     $('section#main').removeClass('eight').addClass('eleven'); 
     $('section#sidebar').removeClass('hide-for-small').addClass('hide'); 
    } else { 
     $('section#main').removeClass('eleven').addClass('eight'); 
     $('section#sidebar').removeClass('hide').addClass('hide-for-small'); 
    } 
}

，增加了線路/移除在需要隱藏換小類，因爲這類包括式

display:inherit !important;

它覆蓋任何試圖隱藏/刪除的元素。所以我需要刪除該類，然後將其添加回來，以便以超過「小」的分辨率成功隱藏我的元素。

似乎對我的情況下工作，但我只是做一個小部分。如果您試圖使頁面上的許多不同元素同時發生，您可能會遇到問題。

來源

2012-12-28 17:45:14 stevecomrie

你可以得到這個重複的工作內容：

<div class="row hide-for-medium-down"> 
    <div class="three columns">...</div> 
    <div class="three columns">...</div> 
    <div class="three columns">...</div> 
    <div class="three columns">...</div> 
</div> 
<div class="row show-for-medium-down"> 
    <div class="four columns">...</div> 
    <div class="four columns">...</div> 
    <div class="four columns">...</div> 
</div>

來源

2013-06-28 16:41:02

不知道你正在使用的版本，但在基金會5，試試這個...

<div class="row"> 
    <div class="columns small-3">...</div> 
    <div class="columns small-6 large-3">...</div> 
    <div class="columns small-3 hide-for-medium-down">...</div> 
    <div class="columns small-3">...</div> 
</div>

或本...

<div class="row"> 
    <div class="columns small-3 large-4">...</div> 
    <div class="columns small-6 large-4">...</div> 
    <div class="columns small-3 hide-for-medium-down">...</div> 
    <div class="columns small-3 large-4">...</div> 
</div>

等等，這取決於您希望剩餘列填充空間的方式。

來源

2013-12-12 17:53:03 Trevor

我最好的建議，升級你的架構......使用粉底5，這個代碼會讓你想要什麼：隱藏手機/平板電腦一列，列空間均勻。

<div class="row"> 
    <div class="small-4 large-3">...</div> 
    <div class="small-4 large-3">...</div> 
    <div class="large-3 show-for-large-up">...</div> 
    <div class="small-4 large-3">...</div> 
</div>

對於手機和平板設備，第三列將被隱藏，並且只顯示3列;在桌面上，將顯示四列寬度爲25％的列。

這是解決此需求的最佳方法，恕我直言

來源

2015-02-04 03:07:57

Zurb基金會 - 刪除中屏幕列

回答

相關問題