Una Breve Explicación

He creado un sitio web responsive que efectivamente tiene tres vistas (escritorio,tableta,móvil). La mayoría de se cambia el diseño a través de CSS utilizando consultas de medios de comunicación (como debe de ser para sitios web sensibles). Sin embargo, parte de que el diseño es demasiado complejo como para simplemente ser manipulados a través de CSS como el HTML en realidad necesita ser movido alrededor de la DOM. Sé que esto no suene demasiado grande, pero no puedo ver cómo lo que estoy destinado a replicar este diseño sin mover ciertos elementos dentro de mi HTML.

Así que, con lo anterior en mente, ahora es plan de escribir una función que crea eventos personalizados para cada uno de los diferentes sensible vistas». Cuando cada evento es disparado (en sincronía con las consultas de medios CSS), va a ejecutar Javascript para mover/animar cualquier elemento que no puede ser manipulado suficiente el uso de CSS.

Mi Pregunta

Es este el mejor método para hacer esto? Si, no, ¿qué otras opciones tengo? Hay bibliotecas existentes que yo pueda ver y aprender de?

Mi pregunta es; ¿Cuál es el mejor método para mover elementos en el DOM para el diseño web responsivo?

Más Explicación

Si el anterior no estaba claro, entonces lea el siguiente:

Considerar estos tres puntos de vista diferentes:

El movimiento de los Elementos en el DOM para el Diseño Web Responsivo

Ahora considere el código para los primeros dos puntos de vista:

Escritorio

<div id="some_container">
    <nav>
        <ul>
        </ul>
    <nav>
    <p>Some Text</p>
    <!-- The rest of the content -->
</div>

Tablet

<div id="some_container">
    <p>Some Text</p>
    <nav>
        <ul>
        </ul>
    <nav>
    <!-- The rest of the content -->
</div>

Aviso de la nav etiqueta se ha movido por debajo de la p etiqueta…

  • Solo quisiera agregar el nav o dos veces el texto, a continuación, mostrar sólo el uno desee, en función de consultas de medios de comunicación.
  • que aumentará el tiempo de carga….. y lo ideal sería buena idea…
  • Por muy, muy, muy poco.
  • Exactamente!
  • La diferencia en el tiempo de carga es muy insignificante. Sería similar a una página de haber un párrafo de texto extra. Tal vez es un extra de 2 kb de carga.
  • si se dirigen a diferentes navegadores » en la pantalla y muchas de las veces, en diferentes lugares, entonces, ¿qué sucede…?
  • Estoy teniendo problemas para comprender su pregunta. «poner muchas veces en diferentes lugares»?
  • Yo siempre he usado @Cerbrus técnica y funciona bien para mí. Sin el agregado de JS necesario y mínimo en el mejor de añadido el tiempo de carga, ni siquiera te darás cuenta de la diferencia, ni siquiera en el dial up…
  • si no hay ninguna biblioteca de jQuery cargado para construir el sitio web entero, entonces sería una buena solución.
  • Trate de no mover cosas alrededor de la DOM. Esto significa que usted tiene que cambiar el enlace de cualquiera de los eventos de ratón y moviendo alrededor de toma igualmente un largo tiempo (especialmente si estás usando jQuery para hacerlo – hablando desde la experiencia). Si es posible, el rediseño de su sitio de modo que las cosas se pueden mover alrededor de los medios de comunicación con preguntas. Esto significa que el tamaño de una página es más rápido así (hablando todavía de la experiencia)

InformationsquelleAutor Ben Carey | 2014-04-23

9 Comentarios

  1. 4

    Que usted puede probar esto:

    Asumiendo este HTML:

    <div id="some_container">
        <nav id="n1">
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </nav>
        <p>Some Text</p>
        <nav id="n2">
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </nav>
    </div>

    Usted sólo tendrá el siguiente css:

    #n1{
        display:none;
    }
    
    @media only screen 
    and (min-width : 600px) {
        #n1{
            display:block;
        }
        #n2{
            display:none;
        }
    }

    El violín ejemplo

    Esto básicamente alterna cual de las dos secciones de navegación se puede ver, dependiendo del tamaño de la pantalla. Tiene la desventaja de la duplicación de código html en su origen (la diferencia en la cantidad de datos es realmente insignificante), pero usted no necesita tener JavaScript para conseguir el efecto, y JS dispositivos deshabilitados solo muestra un ul.

    La gran cosa acerca de esta manera es que es muy de la escala de poder. La necesidad de este «efecto» en una página diferente? Sólo tienes que editar [u]que[/u] de la página. No liarte con JavaScript, codificar nuevas clases /casos.

    • Me hizo considerar este método, pero yo simplemente no les gusta la idea de tener repetitivo HTML…
    • Cómo muchos de los personajes es que nav? Estoy absolutamente seguro de que la diferencia de rendimiento es insignificante.
    • Que es muy cierto y justo, pero esto es sólo un ejemplo. El sitio tiene varios elementos que deben moverse alrededor, simplemente no estoy seguro de que es el mejor método… por No mencionar que hace el código más difícil, aunque es muy poco, para mantener la
    • Con toda honestidad, la razón por la que hice originalmente no utilizar este método fue porque no quería que duplicar código, y me pareció que no era la solución más eficaz. Pero, después de haber mirado además, creo que puede ser la mejor solución. Simplemente porque la carga de las páginas como se supone que mira, que no es necesario esperar para jQuery para cargar para mover los elementos, puedo manejar las animaciones dentro de la CSS, no afecta el tiempo de carga y no tiene el código de por tanto más difíciles de mantener. Y por último, me han aconsejado por alguien con un representante de 13k así que me siento inclinado a confiar en lo que dices 🙂
    • Para ser justos, es sólo un 12,9 k 😉 gracias por tu reconocimiento, sin embargo. El JS opción también funciona, pero creo que puede tener algunos inconvenientes, como que resume, en efecto.
    • pero el contenido duplicado es super malo para el SEO

  2. 5

    Propongo utilizar .insertAfter() y .resize()/.listo() para mover los elementos con base en el tamaño de la página:

    $(window).resize(){
        resize();
    }
    
    $(document).ready(){
        resize();
    }
    
    function resize(){
        if($(window).width() < 480)
        {
            //Mobile
            $("#some_container nav").insertAfter("#some_container p");
        }
        else if($(window).width() < 800)
        {
            //Tablet
            $("#some_container nav").insertAfter("#some_container p");
        }
        else
        {
            //Desktop
            //Leave original layout
        }
    }
    • Esta es una versión muy básica de la función que planea escribir. Los problemas se producen cuando quiero ir de escritorio->móvil (saltando de la tableta), etc…
    • ¿Qué problema tiene?
    • Para ser honesto, no hay ningún problema, puede muy fácilmente escribir este código. Sólo quiero estar seguro de que este es el mejor método para lograr lo que he explicado.
    • Mejores es subjetiva. Sólo puedo ofrecer una buena, la solución de trabajo.
    • La razón por la que es más complicado que su ejemplo anterior es el hecho de que yo quiero que mi función de ser dinámico para que yo pueda añadir tantos puntos de vista como el cliente quiere y la función de crear eventos personalizados para cada vista. Puedo hacer esto, así que no hay necesidad para que me ayude a escribir el código. Yo sólo quería oír a los demás pueblos de las vistas antes de comenzar la función 🙂
    • Sólo para dar un ejemplo de mi respuesta: Mira la cantidad de JavaScript que esto requiere. Luego comparar con la cantidad de (generadas dinámicamente) html que mi sugerencia agregar. Los tiempos de carga no son diferentes, para estas soluciones.
    • Pero entonces, por supuesto, usted puede utilizar la variable de selectores (especialmente en lo relativo a funciones como .closest(), .siblings(), .parent(), etc.) y bucles fácilmente a aplicar el mismo código en varios lugares. Sólo depende de que la ruta de a quiere caminar hacia abajo. Dependiendo de la cantidad de elementos que usted termina encima de tener que mover, si se hace correctamente, un JS solución probablemente requieren la menor cantidad de trabajo.
    • Por supuesto, sí. Solo me pregunto: no esta el flash de la «original» de diseño, antes de que el elemento se mueve en doc.ready, en pantallas más pequeñas? No estoy de acuerdo con la «cantidad de trabajo», sin embargo. Mi sugerencia simplemente se requiere una copia de la navegación (generación) de código, un contenedor con un small o large clase, por ejemplo, y el css puede ser reutilizado en cualquier lugar. El uso de esta funcionalidad en una nueva página sólo requiere el usuario para editar la página.
    • No necesariamente. Depende del rendimiento del sistema del usuario. Todo se basa en el tiempo cuando el JS se carga en la página, sin embargo, en el peor de los casos, podría ser un solo fotograma antes de que el contenido se mueve. Para el promedio de conexión a internet, no habrá ningún problema en absoluto. Tan lejos como la cantidad de trabajo, el diseño tiene que ser estudiados para cada instancia del problema. Es casi el mismo, pero en el largo plazo, el JS solución le permitirá simplemente poner una clase o un atributo en el elemento que desea mover y eso es todo. JS permite mucha más flexibilidad.
    • En el gran esquema de las cosas, la mayoría de los sitios web utilizan JS en alguna forma, y una cantidad muy alta de uso de jQuery, por lo que el contenido sería cargado de todos modos.
    • Así que, ¿qué pasa si tengo 2 diferentes elementos en la misma página, que quiero ir a diferentes lugares? Como: a B c d e f G h i --> a c B d e f h G i
    • Yo le pondría una clase en a y G y hacer $(".class").each(function(){$(this).insertAfter($(this).next());});
    • Y si el objetivo no es necesariamente el next() elemento, pero varía de caso a caso? (Vas a necesitar un .target clase) estoy tratando de llegar a un punto: Sí, esto se puede hacer con JS, pero es mucho más fácil colocar los elementos donde quieras, y dependiendo de la consulta de medios de comunicación
    • La solución sería tener en cuenta para todos los casos, pero ¿y qué? Lo mismo se aplica a una solución CSS. Él tendría que explícitamente colocar la copia exactamente lo que quiere en la fuente. A partir de lo que parece, habrá un número limitado de casos, por lo que el «¿y si él tiene más de 9000 casos diferentes?» es irrelevante. Eso sería ridículo.
    • Mi punto es que la solución css no importa de donde los elementos se colocan. Funciona para todos de los casos. JavaScript tiene que ser modificado para diferentes casos, o tiene que disponer de controles integrados. Usted puede incluso necesitar agregar target divs, que está muy cerca de lo que mi solución está haciendo.
    • Como he dicho antes. Las soluciones son muy similares. La decisión pertenece a una de las cuales es la creación de la página. Ni la solución es mejor de la otra; sólo depende de la preferencia y comprensión.
    • No son similares en todos. Una solución no toque el css, y el otro es de 90% css.
    • Tomate, tomahto. Es todas las opiniones que de aquí en adelante.
    • Más como un «avión, submarino». Ambos resultar en que usted se mueve desde el punto a al punto B, pero lo hacen de una manera completamente diferente.

  3. 3

    La enquire.js biblioteca resuelve este problema al permitir que el fuego JS funciones en respuesta a las consultas de medios CSS. Así que usted puede ejecutar su detach() y append() de la lógica de acuerdo a los diferentes tamaños de pantalla. Es ligero para arrancar.

    Ver: http://wicky.nillia.ms/enquire.js/

  4. 2

    Hay muchos métodos como appendTo

    //check for the window width
    if($(window).width() < 700){
      //append to the p  
      $('#some_container nav').appendTo('#some_container p');
    }
    • Gracias por tu respuesta, pero soy consciente de cómo anexar el DOM y mover elementos a su alrededor, basado en el tamaño de la ventana, lo que me gustaría saber es si es el mejor método para lograr esta sincronizado con las consultas de medios CSS?
    • con css consulta de medios de comunicación no puede mover los elementos como @Cerbus dice que usted tiene que hacer como que….
    • si te refieres a la consulta de medios de comunicación con js que es bueno. sólo la búsqueda acerca de que usted encontrará una gran cantidad de resultados en la que….
  5. 1

    La creación de contenido duplicado para resolver sensible desafíos de diseño no es una práctica recomendada. Esto hace que el margen de ganancia más difícil de mantener (especialmente cuando otro desarrollador tiene sobre el proyecto y no se da cuenta de que se ha actualizado en más de un lugar), se aumenta el tamaño del archivo (si el tamaño del archivo no era importante, que no nos minify nuestro CSS/JS o GZIP nuestro HTML), y las tecnologías de apoyo y otros agentes de la web que no tienen CSS en cuenta lo ven como el contenido que se repite.

    Es sólo desordenado, y no veo cómo alguien podría considerar que es una mejor práctica.

    Mientras que JavaScript no es lo ideal, bien, veo que no hay problema si es que se utiliza como una forma de mejora progresiva. Recientemente me encontré con él con bastante frecuencia que he creado un plugin de jQuery para él: https://github.com/thomashigginbotham/responsive-dom

    El ejemplo de uso:

    var $mainNav = $('.main-nav');
    
    $mainNav.responsiveDom({
        appendTo: '.sidebar',
        mediaQuery: '(min-width: 600px)'
    });
  6. 0

    Acabo de escribir un plugin de jQuery que hace exactamente esto, eche un vistazo aquí. Básicamente, se crea automáticamente una serie de presentaciones en términos de filas y columnas, que se utilizan para las diferentes vistas que se muestran por encima de

  7. 0

    Estoy haciendo esta cosa exacta ahora mismo con la navegación que tengo que mover en el encabezado de escritorio y justo debajo de la cabecera de una hamburguesa del menú en el móvil. Tengo un detector de eventos en la ventana se cambia el tamaño que llama a una función que comprueba el tamaño de la pantalla y se lo pasa a mi toggleNavigation función. Tengo esta separado, porque tengo un par de otras funciones aparte de eso que se llama en la checkBreakPoint que no están en la lista. A continuación, para asegurarse de que no está constantemente en movimiento mi dom o volver a agregarla yo primero revisa lo contenedor principal y que solo se mueve si no es en el que me esperan para que screensize. Mi proyecto requiere que no tiene ningún dependencias externas, por lo que este se acaba de hacer en la llanura de Javascript y entonces yo uso las consultas de medios para el estilo de los elementos basados en el tamaño de la pantalla.

    var mainNav = document.getElementById('rww_main_nav'); //element I want to move
    var tieredHeader = document.getElementById('rww_tiered_header'); //where it should be on mobile
    var branding = document.getElementById('rww_branding'); //where it should be on desktop
    
    window.addEventListener("resize", checkBreakPoint);
    
    function checkBreakPoint() {
            //width of viewport
            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            toggleNavLocation(w);
    }
    
    function toggleNavLocation(screensize) {
        if (screensize > 999) {
            if (mainNav.parentElement.id === 'rww_tiered_header') {
                branding.appendChild(mainNav);
            }
        } else {
            if (mainNav.parentElement.id === 'rww_branding') {
                tieredHeader.appendChild(mainNav);
            }
        }
    }
  8. 0

    Si usted no quiere hacer javascript, uso de la técnica de la cuadrícula.

    <div class="main_container">
        <nav class="grid_nav">
            <ul>
            </ul>
        <nav>
        <div class="grid_text">
            <p>Some Text</p>
        </div>
        <!-- The rest of the content -->
    </div>

    .main_container{
      display: grid;
      @media screen and (max-width: 500px) { //mobile
        grid-template-rows:    1fr 1fr;
        grid-template-areas: "gridnav"
                             "gridtext";
      }
      @media screen and (min-width: 500px) {//web
        grid-template-rows:    1fr 1fr;
        grid-template-areas: "gridtext"
                             "gridnav";
      }
    }
    
    .grid_nav{
      grid-area: gridnav;
    }
    .grid_text{
      grid-area: gridtext;
    }

    Pero es sólo cuando los movimientos se encuentran dentro de la «main_container»

    que se refiere…

  9. -1

    Esto puede introducir un nuevo conjunto de problemas, pero podrías usar position: absolute en los elementos que se mueva, y reposicionar alrededor de la página basado en el tamaño de la pantalla?

Dejar respuesta

Please enter your comment!
Please enter your name here