モバイルの可視性と Zurbs Foundation に精通している人

StackOverflow https://stackoverflow.com//questions/9687524

質問

タブレットデバイスとデスクトップの両方でdivを非表示にしようとしています。ザーブスファンデーションを使っています http://foundation.zurb.com/docs/layout.php そうするために。ただし、クラスを適用しようとすると、 hide-on-tablets & hide-on-desktops 2 番目のものは何らかの方法で最初のものをオーバーライドします。 hide-on-tablets タブレットに表示されます。独自のメディア クエリを作成して両方で非表示にすることもできますが、クラスを利用するか、すべてのコードを用意することに意味があると考えています。私のサイトで見ることができます http://グッドモーニングムーン.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>
役に立ちましたか？

解決

あなたは本当にこれをチェックアウトする必要があります。

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

あなたのウェブサイトが表示されているさまざまな種類のデバイスには、さまざまな種類のスタイルシートを定義できます。

助けを願っています！ アーロン

他のヒント

Foundationのバージョン3を見てください。> http://foundation.zurb.com/docs/media-queries.php ＆例： http：//foundation.zurb.com / mobile-example3.php

使用。SHOW-SWER

767px以上のデバイスに必要な場合は、独自のMediaQueryをロールします。

歓声

私はあなたがそれらのうちの1つだけが必要だと思います： https://groups.google.com/forum/FromGroups=＃！トピック/基礎フレームワーク - / WHS4DZAS31U

私はそれが役立つことを願っています

.touch Modernizr によって body 要素に追加されます。そのために何もする必要はありません。たとえば、デバイスが1280x768の場合、デスクトップやタブレットの場合はわかります。

その秘訣は、 .hide-on-x そして .show-on-x クラスは、あなたがそれを必要とすることしか必要だということです。「非表示のタブレット」のように、そこには暗黙の「唯一」があります。必要なのはそれだけです。

（ソース： https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U)

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top