我试图在平板电脑设备和桌面设备上隐藏 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; }
}
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>
那么你真的需要检查一下。
http://www.w3schools.com/css/css_mediatypes.asp
您可以为正在查看您网站的不同类型的设备定义不同类型的样式表。
希望有帮助！
亚伦
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
