Toute personne familiarisée avec la visibilité mobile et la fondation Zurbs

Question

J'essaie de masquer un div à la fois sur une tablette et sur un ordinateur de bureau.J'utilise le fond de teint Zurbs http://foundation.zurb.com/docs/layout.php faire cela.Cependant, quand j'essaie d'appliquer les cours hide-on-tablets & hide-on-desktops le second remplace le premier d'une manière ou d'une autre et le hide-on-tablets apparaît sur une tablette.Je peux créer mes propres requêtes multimédias et les masquer sur les deux, mais je pense que je devrais profiter des cours ou à quoi ça sert d'avoir tout le code.Vous pouvez le consulter sur mon site à http://bonjourlune.ca en redimensionnant le navigateur.Le mot de passe du site est springy88

Merci d'avance.

visibilité de fondation.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; }

    }

MON 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

Il faut vraiment que tu vérifies ça alors.

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

Vous pouvez définir différents types de feuilles de style pour différents types d'appareils sur lesquels votre site Web est consulté.

J'espère que cela pourra aider!Aaron

Answer 2

Jetez un œil à la version 3 de Foundation : http://foundation.zurb.com/docs/media-queries.php & exemple dans : http://foundation.zurb.com/mobile-example3.php

Utilisez .show-for-small

Si vous en avez besoin pour un appareil plus petit que 767 pixels, lancez votre propre requête multimédia.

Acclamations

Answer 3

Je pense que tu n'en as besoin que d'un seul :https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/Whs4dZaS31U

J'espère que ça aide

Answer 4

.touch est ajouté par Modernizr à l'élément body - vous n'avez rien à faire pour cela.C’est pour que nous puissions dire, quand un appareil est 1280x768 par exemple, s’il s’agit d’un ordinateur de bureau ou d’une tablette.

L'astuce du .hide-on-x et .show-on-x classes est que vous ne n’en avez jamais besoin.Il y a un « seulement » implicite là-dedans, comme dans 'cacher-seulement-sur-les-tablettes'.Ce devrait être le seul dont vous avez besoin.

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