Любой, кто знаком с мобильной видимостью и основанием zurbs

Question

Я пытаюсь скрыть div как на планшетном устройстве, так и на рабочем столе. Для этого я использую zurbs foundation 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> 

Answer 1

Вам действительно нужно, чтобы проверить это тогда.

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

Вы можете определить различные типы таблиц стилей для различных типов устройств, ваш сайт в настоящее время рассматривается на.

Надеюсь, что это поможет! Аарон

Answer 2

Взгляните на 3-й версии Фонда: http://foundation.zurb.com/docs/media-queries.php & пример в: http://foundation.zurb.com/mobile-example3.php

Использование .show-для-малых

Если вам это нужно для меньшего устройства, чем 767px, свернуть свой собственный mediaquery ,

Приветствия

Answer 3

Я думаю, что вам нужен только один из них: https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U

Я надеюсь, что это помогает

Answer 4

.touch добавляется по Modernizr к элементу тела - вам не нужно сделайте все для этого. Это можно сказать, когда устройство имеет 1280x768, например, если это настольный компьютер или планшет.

Уловка классам .hide-on-x и .show-on-x заключается в том, что вы только когда-либо понадобились. Там подразумевается «только», как в «hide-only-on-tablets». Это должно быть единственное, что вам нужно.

(Источник: https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U)