Question

我在Zurb Foundation 3中有一个网站原型，到目前为止我有桌面版本，现在我正在调整它以对平板电脑和手机负责。

我感到满意的是：我有一些内容连续的列，我想删除一些中小分辨率的列。但我希望其他列可以拉伸到页面宽度的其余部分。我该怎么做呢？

我正在使用

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列只是向左移动到第3个位置，第四个空格将再次保持为空。

我得到的最近的是使用mobile-x-up类来调整网格，以便为手机提供较少的列 - 这样：

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

不幸的是，这只适用于手机，但我也无法将其用于中等分辨率的平板电脑，因为没有相应的功能。

总的来说，我的问题是：解决这个问题的最佳方法是什么？什么是在保持网格的同时在较小的屏幕上隐藏元素的最佳方法？甚至可以在中等屏幕上从网格中删除元素，同时仍保持网格工作吗？

Answer 1

不确定您使用的是哪个版本，但在Foundation 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>

等，具体取决于您希望剩余列填充空间的方式。

Answer 2

我提出的最佳解决方案是在调整浏览器大小（或以特定大小加载）时使用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' );
    }
}

需要添加/删除 hide-for-small 类的行，因为该类包含样式

display:inherit !important;

覆盖任何隐藏/删除元素的尝试。所以我需要删除该类，然后按顺序将其重新添加，以便成功地以超过“小”的分辨率隐藏我的元素。

似乎适合我的情况，但我只是在一小部分上做。如果你试图让页面上的许多不同元素同时出现，你可能会遇到问题。

Answer 3

您可以使用重复内容：

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

Answer 4

我最好的建议，升级你的框架...使用基础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％宽度。

这是满足此要求的最佳方式，恕我直言

Answer 5

听起来你正在寻找CSS媒体查询。我建议你阅读以下页面。

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

此外，隐藏内容为什么不调整大小，以便您的移动用户也可以查看它，除非您觉得这是一个糟糕的设计选择！

我希望有所帮助。

Zurb Foundation - 删除中等屏幕的色谱柱

5 个答案: