jumbotron - texto css responsive

Etiqueta responsiva h1 de Bootstrap 3

Question

Estoy creando un sitio y quiero que responda, así que estoy usando el programa de arranque 3. Sin embargo, la etiqueta h1 en la página de política de privacidad y en la página sale del contenedor en pequeños dispositivos móviles ya que la palabra es demasiado grande. ¿Hay alguna forma en que pueda hacer que la etiqueta h1 se reduzca en tamaño para que quepa en el contenedor en dispositivos móviles más pequeños? El sitio es muscadinewinerecipe.com si alguien quiere ver de lo que estoy hablando. Es la página sobre la página y la política de privacidad.

Answer 1

Puedes usar esto:

CSS:

h1{
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     -o-hyphens: auto;
     hyphens: auto;
}

DEMO: http://jsfiddle.net/ckq04r5q/

O si desea más compatibilidad con el navegador, puede emparejar su h1 con id o clase y reducir el tamaño de fuente con consulta de medios en <768px

CSS:

@media screen and (max-width: 768px) {
    h1{
        font-size:14px;
    }
}

Cuando su pantalla tiene menos de 768px de ancho, la propiedad se ejecuta

Answer 2

He tenido el mismo problema, que he resuelto con jQuery:

function resize() {
    var n = $("body").width() / 17 + "pt";
    $("h1").css(''fontSize'', n);
}
$(window).on("resize", resize);
$(document).ready(resize);

La relación se puede ajustar reemplazando el valor 17 y se puede usar para otras etiquetas cambiando el h1 .