Jeder, der mit Mobile Visibility und zurbs Foundation vertraut ist

Question

Ich versuche, ein Div sowohl auf einem Tablet-Gerät als auch auf einem Desktop auszublenden.Ich benutze die zurbs Foundation http://foundation.zurb.com/docs/layout.php tun.Wenn ich jedoch versuche, die Klassen anzuwenden hide-on-tablets & hide-on-desktops der zweite überschreibt den ersten irgendwie und der hide-on-tablets zeigt sich auf einem Tablet.Ich kann meine eigenen Medienabfragen erstellen und sie auf beiden ausblenden, aber ich denke, ich sollte Klassen nutzen oder was bringt es, den gesamten Code zu haben.Sie können es auf meiner Website unter anzeigen http://goodmorningmoon.ca durch Ändern der Browsergröße.Das Passwort für die Site lautet springy88

Danke im Voraus.

Stiftung.CSS-Sichtbarkeit

/* -------------------------------------------------- 
    :: 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; }

    }

MEIN 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

Dann musst du dir das wirklich ansehen.

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

Sie können verschiedene Arten von Stylesheets für verschiedene Arten von Geräten definieren, auf denen Ihre Website angezeigt wird.

Hoffe das hilft!Aaron

Answer 2

Schauen Sie sich Version 3 von Foundation an: http://foundation.zurb.com/docs/media-queries.php & beispiel in: http://foundation.zurb.com/mobile-example3.php

Verwenden .show für kleine

Wenn Sie es für ein kleineres Gerät als 767 Pixel benötigen, rollen Sie Ihre eigene Medienabfrage.

Jubel

Answer 3

Ich denke, du brauchst nur einen von ihnen:https://groups.google.com/forum/?fromgroups =#!thema/foundation-framework-/Whs4dZaS31U

Ich hoffe, es hilft

Answer 4

.touch wird von Modernizr zum body-Element hinzugefügt - dafür müssen Sie nichts tun.Es ist so, dass wir erkennen können, wann ein Gerät ist 1280x768 zum Beispiel, wenn es sich um einen Desktop oder ein Tablet handelt.

Der Trick mit dem .hide-on-x und .show-on-x klassen ist, dass Sie nur brauche jemals einen.Es gibt ein implizites 'nur' darin, wie in 'nur auf Tablets verstecken'.Das sollte das einzige sein, das Sie brauchen.

(Quelle: https://groups.google.com/forum/?fromgroups =#!thema/foundation-framework-/Whs4dZaS31U)