任何熟悉移动可见性和 zurbs 基础的人答案

【问题标题】：Anyone familiar with mobile visibility and zurbs foundation任何熟悉移动可见性和 zurbs 基础的人
【发布时间】：2012-03-30 01:26:20
【问题描述】：

我正在尝试在平板设备和台式机上隐藏 div。我正在使用 zurbs 基金会http://foundation.zurb.com/docs/layout.php 这样做。但是，当我尝试应用 hide-on-tablets 和 hide-on-desktops 类时，第二个会以某种方式覆盖第一个，hide-on-tablets 会出现在平板电脑上。我可以创建自己的媒体查询并将它们隐藏在两者上，但我认为我应该利用类或拥有所有代码的意义。您可以通过调整浏览器大小在我的网站http://goodmorningmoon.ca 上查看它。该网站的密码是springy88

提前致谢。

foundation.css 可见性

/* -------------------------------------------------- 
    :: Mobile Visibility Affordances
---------------------------------------------------*/


    .show-on-phones { display: none !important; }   
    .show-on-tablets { display: none !important; }
    .show-on-desktops { display: block !important; }

    .hide-on-phones { display: block !important; }  
    .hide-on-tablets { display: block !important; }
    .hide-on-desktops { display: none !important; }


    /* Modernizr-enabled tablet targeting */
    @media only screen and (max-width: 1280px) and (min-width: 768px) {
        .touch .hide-on-phones { display: block !important; }
        .touch .hide-on-tablets { display: none !important; }
        .touch .hide-on-desktops { display: block !important; }


        .touch .show-on-phones { display: none !important; }
        .touch .show-on-tablets { display: block !important; }
        .touch .show-on-desktops { display: none !important; }

    }


    @media only screen and (max-width: 767px) {
        .hide-on-phones { display: none !important; }
        .hide-on-tablets { display: block !important; }
        .hide-on-desktops { display: block !important; }

        .show-on-phones { display: block !important; }
        .show-on-tablets { display: none !important; }
        .show-on-desktops { display: none !important; }

    }

我的 HTML

<div class="row touch">
            <div id="iphoneNav" class="four columns hide-on-tablets hide-on-desktops">
                <?php wp_nav_menu( array( 'theme_location' => 'iphone-menu','menu_class' => 'nav-bar', 'container' => 'nav') ); ?>
                </div>
        </div>

【问题讨论】：

标签： css mobile desktop visibility zurb-foundation

【解决方案1】：

那你真的需要看看这个。

http://www.w3schools.com/css/css_mediatypes.asp

您可以为正在查看您的网站的不同类型的设备定义不同类型的样式表。

希望对您有所帮助！亚伦

【讨论】：

我最终只创建了自己的媒体查询，因为 zurb 一起使用时会相互覆盖。我会将您的答案标记为正确，因为它是一个相关链接。

【解决方案2】：

查看 Foundation 的第 3 版：http://foundation.zurb.com/docs/media-queries.php 和示例：http://foundation.zurb.com/mobile-example3.php

使用 .show-for-small

如果您需要它用于小于 767 像素的设备，请滚动您自己的媒体查询。

干杯

【讨论】：

【解决方案3】：

我认为您只需要其中一个： https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U

希望对你有帮助

【讨论】：

【解决方案4】：

.touch 被 Modernizr 添加到 body 元素中——你不需要为此做任何事情。这样我们就可以知道，什么时候设备例如 1280x768，如果它是台式机或平板电脑。

.hide-on-x 和 .show-on-x 类的诀窍是你只永远需要一个。那里有一个隐含的“唯一”，如 “仅在平板电脑上隐藏”。这应该是您唯一需要的。

（来源：https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U）

【讨论】：