熟悉移动可见性和zurbs基金会的人

Question

我试图在平板设备和桌面上隐藏一个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>

Answer 1

那你真得看看这个。

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

您可以为正在浏览的不同类型的设备定义不同类型的样式表。

希望这能帮上忙！Aaron

Answer 2

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

用.显示-为了小

如果您需要比767 it更小的设备，可以使用自己的媒体查询。

干杯

Answer 3

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

我希望它能帮上忙