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

StackOverflow https://stackoverflow.com//questions/9687524

题

我试图在平板电脑设备和桌面设备上隐藏 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>
有帮助吗？

解决方案

那么你真的需要检查一下。

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

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

希望有帮助！亚伦

其他提示

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

使用 .show-for-small

如果您需要小于 767px 的设备，请推出您自己的媒体查询。

干杯

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

我希望它有帮助

.touch 由 Modernizr 添加到 body 元素中 - 您不需要为此执行任何操作。因此，我们可以告诉我们，例如，设备为1280x768，例如台式机或平板电脑。

诀窍是 .hide-on-x 和 .show-on-x 课程是您只需要一个。其中有一个暗示的“仅”，例如“仅隐藏在thablets”中。那应该是您唯一需要的。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top