Кто-нибудь знаком с мобильной видимостью и основанием Zurbs

Question

Я пытаюсь скрыть div на планшетном устройстве, так и на рабочем столе.Я использую Foundation Zurbs http://foundation.zurb.com/docs/layout.php<> сделать это.Однако, когда я пытаюсь применить классы hide-on-tablets & hide-on-desktops, второй один переопределяет первый как-то, а генеракодицетагкод отображается на планшете.Я могу создавать свои собственные медиа-запросы и скрыть их как на обоих, но я полагаю, что я должен воспользоваться классами или в чем смысл весь код.Вы можете просмотреть его на моем сайте в 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/csss/css_mediatypes.asp .

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

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

Answer 2

Посмотрите на версию 3 фонда: http://foundation.zurb.com.com/docs/media-queries.php & Пример в: http://foundation.zurb.com / mobile-example3.php

Используйте .show-for-small

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

Приветствия

Answer 3

Я думаю, тебе нужен только один из них: https://groups.google.com/forum/?fromgroups= #! Тема / Фонд-Framework- / whs4dzas31u

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

Answer 4

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

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

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