Question

我试图在平板电脑设备和桌面上隐藏div。我正在使用zurbs foundation http://foundation.zurb.com/docs/layout.php这样做。但是，当我尝试应用课程hide-on-tablets＆amp; 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

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

希望有所帮助！亚伦

Answer 2

看看基金会第3版：http://foundation.zurb.com/docs/media-queries.php＆amp;例如：http://foundation.zurb.com/mobile-example3.php

使用.show-for-small

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

干杯

Answer 3

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

我希望它有所帮助

Answer 4

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

.hide-on-x和.show-on-x类的诀窍就是你   永远需要一个。有一个隐含的＆＃39; only＆＃39;在那里，如在   ＆＃39;隐藏只接通片剂＆＃39 ;.那应该是你唯一需要的。

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

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

4 个答案: