Любой, кто знаком с мобильным видением и основой Zurbs - PullRequest
Новая
       10

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

1 голос
/ 13 марта 2012

Я пытаюсь скрыть 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; }

    }

МОЙ 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>

Ответы [ 4 ]

1 голос
/ 13 марта 2012

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

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

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

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

0 голосов
/ 22 апреля 2014

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

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

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

0 голосов
/ 12 февраля 2013

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

Надеюсь, это поможет

0 голосов
/ 05 февраля 2013

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

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

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

Приветствия

...