Zurb Foundation - 删除中等屏幕的列

Posted 2023-03-06

【中文标题】Zurb Foundation - 删除中等屏幕的列

【英文标题】：Zurb Foundation - Remove column for medium screens

【发布时间】：2012-10-08 23:09:39

【问题描述】：

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

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

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

【问题讨论】：

这需要自定义 CSS。但是，您应该尽量少用这种技术。隐藏内容列会破坏响应式设计的许多好处。 netmagazine.com/features/…

【参考方案1】：

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

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

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

希望对你有帮助。

【讨论】：

Justin - 看看 Zurb 的 Foundation：foundation.zurb.com 这是一个高级响应式框架，广泛使用媒体查询。这个问题专门针对使用 Foundation 框架更改列集的大小，而不仅仅是关于如何使用一般媒体查询的问题。

【参考方案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;

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

似乎适用于我的情况，但我只在一小部分进行。如果您试图同时为页面上的许多不同元素实现这一点，您可能会遇到问题。

【参考方案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>

【参考方案4】：

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

等等，这取决于您希望剩余列如何填充空间。

【参考方案5】：

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

这是解决此要求的最佳方法，恕我直言