1

我正在尝试在平板设备和台式机上隐藏 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>
4

4 回答 4

1

那你真的需要看看这个。

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

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

希望有帮助！亚伦

于 2012-03-13T16:04:03.640 回答
0

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

使用 .show-for-small

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

干杯

于 2013-02-05T16:35:19.623 回答
0

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

我希望它有帮助

于 2013-02-12T15:06:30.210 回答
0

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

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

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

于 2014-04-22T16:43:31.917 回答