任何熟悉移动可视性和zurbs基础的人 [英] Anyone familiar with mobile visibility and zurbs foundation

问题描述

我想在平板电脑和桌面上隐藏div。我使用的是zurbs基础 http://foundation.zurb.com/docs/layout.php这样做。但是，当我尝试应用类 hide-on-tablets & hide-on-desktops 第二个替换第一个，而且 hide-on-tablets 片剂。我可以创建自己的媒体查询和隐藏它们在两个，但我想我应该利用类或什么是有点所有的代码。您可以通过调整浏览器大小在 http://goodmorningmoon.ca 上查看我的网站上的内容。网站的密码为springy88

提前感谢。

foundation.css visibility

  / * ---------------------- ---------------------------- 
 ::移动可见性费用
 --------- ------------------------------------------ * / 
 
 
 .show-on-phones {display：none！important; } 
 .show-on-tablet {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的平板电脑定位* / 
 @media仅屏幕和（最大宽度：1280像素）和（最小宽度：768像素）{
 .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-tablet {display：block！important; } 
 .touch .show-on-desktops {display：none！important; } 
 
} 
 
 
 @media only screen and（max-width：767px）{
 .hide-on-phones {display：none！重要; } 
 .hide-on-tablets {display：block！important; } 
 .hide-on-desktops {display：block！important; } 
 
 .show-on-phones {display：block！important; } 
 .show-on-tablet {display：none！important; } 
 .show-on-desktops {display：none！important; } 
 
} 
  

MY HTML

 < div class =row touch> 
< div id =iphoneNavclass =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> 
  

解决方案

p>

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

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

希望有所帮助！
Aaron

I am trying to hide a div on both a tablet device and a desktop. I am using zurbs foundation http://foundation.zurb.com/docs/layout.php to do so. However when I try to apply the classes hide-on-tablets & hide-on-desktops the second one overrides the first one somehow and the hide-on-tablets shows up on a tablet. I can create my own media queries and hide them on both but I figure I should take advantage of classes or what's the point of having all the code. You can view it on my site at http://goodmorningmoon.ca by resizing the browser. The password for the site is springy88

Thanks in advance.

foundation.css visibility

/* -------------------------------------------------- 
    :: 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; }

    }

MY 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>

解决方案

You really need to check out this then.

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

You can define different types of Style Sheets for Different Types of Devices your Website is being viewed on.

Hope that helps! Aaron

这篇关于任何熟悉移动可视性和zurbs基础的人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！