5

Estoy programando una página responsive pero necesito tener diferentes textos dependiendo del tamaño de la misma. Es decir:

  • 900px: Asociación Autónoma del Automovilismo;
  • 450px: Asoc. Autónoma Automovilismo;
  • <400px: AAA;

¿Tendría que cargarlos todos y mostrarlos con display: block y ocultarlos con hidden? ¿O hay una manera más eficiente?

1
  • 2
    con php no vas a poder cambiar un texto dependiendo del tamaño de la pantalla. De eso se encarga CSS (más en concreto las media queries), y si necesitas más ayuda, javascript.
    – Zander
    el 25 nov. 2016 a las 7:07

3 respuestas 3

7

A mi me gusta mas así:

.texto_responsive:before{
  content: attr(data-desktoptext);
}

@media (max-width:900px) {
    .texto_responsive:before {
        content: attr(data-tablettext);
    }
}

@media (max-width:400px){
    .texto_responsive:before {
        content: attr(data-phonetext);
    }
}
<span class="texto_responsive" data-desktoptext="Asociación Autónoma del Automovilismo" data-tablettext="Asoc. Autónoma Automovilismo" data-phonetext="AAA"></span><br>
<span class="texto_responsive" data-desktoptext="Mi texto para desktop" data-tablettext="Mi texto para tablet" data-phonetext="Mi texto para movil"></span>

Son 2 las ventajas:

  1. Puedes cambiar el texto en el html y así tener varios idiomas
  2. Puedes hacerlo genérico y usarlo en mas casos
3
  • No sabía que se podían usar atributos dentro del content. Muy buena respuesta +1 el 25 nov. 2016 a las 9:58
  • 1
    Muy buena idea, sobre todo me gusta que el mismo CSS serviría para múltiples casos. Aun así sigo pensando que se debería poner el texto principal dentro de la etiqueta y después usar la técnica de @Error404 o esta.
    – user7176
    el 25 nov. 2016 a las 10:07
  • No sabía que se podía hacer esto, muchas gracias. Tengo una duda adicional. ¿Cómo lo uso con queries de mySQL? ¿O puedo hacer trampa? Es decir: ¿content: $texto1? Gracias, lo probaré cuando tenga un tiempo. Pero me gusta. el 25 nov. 2016 a las 20:31
6

Ejemplo CSS

Esto lo puedes realizar simplemente con CSS con la propiedad content, el selector :before y media-queries.

Aquí está tu ejemplo:

#texto:before{
  content: "Asociación Autónoma del Automovilismo";
}

@media (max-width:900px) and (min-width:450px) {
    #texto:before {
        content: "Asoc. Autónoma Automovilismo";
    }
}

@media (max-width:400px){
    #texto:before {
        content: "AAA";
    }
}
<span id="texto"></span>


Ejemplo Javascript

Además, esto también lo puedes realizar mediante Javascript puro. ¿Cual es la principal ventaja? Que hay muchas herramientas que acceden directamente al DOM de la página (HTML) y por lo tanto con el primer ejemplo estas aplicaciones no van a poder acceder a los textos. Sin embargo, Javascript modifica directamente el DOM de la página y por lo tanto estas herramientas si que van a poder acceder a estos textos.

Ejemplo con Javascript:

window.addEventListener("resize", cambiarTexto);

function cambiarTexto() {    
    var width = document.documentElement.clientWidth;
    
    if (width < 900 && width > 450){
      document.getElementById("texto").innerHTML = "Autónoma Automovilismo";
    }else if(width < 400){
      document.getElementById("texto").innerHTML = "AAA";
    }else{
      document.getElementById("texto").innerHTML = "Asociación Autónoma del Automovilismo";
    }
}
<span id="texto">Asociación Autónoma del Automovilismo</span>

8
  • 1
    Una idea ingeniosa, me gusta. El problema es que si el texto es relevante debería estar en el HTML. Quiza se podría poner "Asociación Autónoma del Automovilismo" en el HTML y ocultarlo por CSS, si se desactivan los estilos aparerecerá el texto
    – user7176
    el 25 nov. 2016 a las 7:33
  • @blonfu Se podrían crear tres spans e ir mostrando la visibilidad de cada uno de ellos. Sin embargo, creo que de esta manera tanto el HTML como el CSS quedarán mucho más limpios. el 25 nov. 2016 a las 7:34
  • Sí, por eso planteo la idea de ponerlo en el HTML y ocultarlo pero usar tu técnica del :before para mostrar los textos. Y si se desactivan los estilos aparecerá el texto original y los lectores de pantalla tambien lo leerán sin problema.
    – user7176
    el 25 nov. 2016 a las 7:37
  • @blonfu ¿Te refieres a poner un texto por defecto por si se desactivan los estilos? el 25 nov. 2016 a las 7:39
  • Exacto, y para lectores de pantalla, buscadores, etc., que leen el HTML y no el CSS
    – user7176
    el 25 nov. 2016 a las 7:43
1

Yo me plantearía seriamente si es necesario variar el texto. Creo que es mejor ser minimalista en las alteraciones. Por eso siempre que fuera posible eligiría una de las 3 opciones para todas las versiones.

Si escogemos el acrónimo podemos usar la etiqueta HTML correspondiente que además nos da la posibilidad de consultar el significado del acrónimo:

<acronym title="Asociación Autónoma del Automovilismo">AAA</acronym>

Y en caso de que fuera absolutamente necesario mostrar textos diferentes optaría por la opción de usar varios DIV y esconder los que no querramos mostrar. Me parece mejor para SEO, los indexadores te reconocerán los textos, fácil de implementar y no le veo inconvenientes. No debería aumentar mucho el tamaño de la página.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.