Cualquiera que esté familiarizado con el móvil visibilidad y zurbs fundación

Question

Estoy tratando de ocultar un div en un tablet y un escritorio.Estoy usando zurbs fundación http://foundation.zurb.com/docs/layout.php para ello.Sin embargo cuando trato de aplicar las clases hide-on-tablets & hide-on-desktops el segundo, anula la primera, de alguna manera, y la hide-on-tablets se presenta en una tableta.Puedo crear mis propios medios de comunicación, las consultas y los esconden en ambos, pero me imagino que debe tomar ventaja de las clases o lo que es el punto de tener todo el código.También se puede ver en mi página web en http://goodmorningmoon.ca al cambiar el tamaño del navegador.La contraseña para el sitio está springy88

Gracias de antemano.

de la fundación.css visibilidad

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

    }

MI 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

Usted realmente necesita para comprobar esto, entonces.

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

Usted puede definir diferentes tipos de Hojas de Estilo para Diferentes Tipos de Dispositivos de su sitio Web está siendo observada.

Espero que ayude!Aaron

Answer 2

Echa un vistazo a la versión 3 de la Fundación: http://foundation.zurb.com/docs/media-queries.php & ejemplo en: http://foundation.zurb.com/mobile-example3.php

Uso .show para la pequeña

Si usted necesita para dispositivo más pequeño que 767px, del rollo de su propia mediaquery.

Saludos

Answer 3

Creo que sólo se necesita uno de ellos:https://groups.google.com/forum/?fromgroups=#!tema/fundación-marco-/Whs4dZaS31U

Espero te sirva de ayuda

Answer 4

.touch se añade por Modernizr para el elemento body - usted no necesita hacer nada para que.Es así que podemos decir, cuando un dispositivo es 1280x768 por ejemplo, si es una computadora de escritorio o tablet.

El truco para la .hide-on-x y .show-on-x clases, es que sólo alguna vez necesita uno.Hay una implícita 'sólo' hay, como en "hide-solo-en-tablets'.Esa debe ser la única que necesita.

(Fuente: https://groups.google.com/forum/?fromgroups=#!tema/fundación-marco-/Whs4dZaS31U)