¿Cómo puedo hacer que mis encabezados de página cambien de tamaño con el diseño receptivo?

Así que tengo un sitio que necesito para ser funcional tanto en dispositivos móviles como en computadoras. Estoy usando bootstrap-responsive y he conseguido muchas cosas para trabajar. Actualmente estoy trabajando en la unidad héroe para la portada. Tengo un encabezado de página que me gustaría escalar automáticamente según el tamaño de la pantalla. El sitio principal de bootstrap (http://twitter.github.com/bootstrap/) utiliza algo como lo que quiero hacer con el encabezado de su página principal. Cualquier ayuda es apreciada.¿Cómo puedo hacer que mis encabezados de página cambien de tamaño con el diseño receptivo?

código relevante:

<div class="container"> 
     <div class="hero-unit"> 
      <div class="page-header"> 
       <h1>Page Header</h1> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu dolor, dictum scelerisque gravida nec, vulputate in odio. Pellentesque sagittis ipsum et mauris elementum vitae molestie ipsum blandit. Mauris tempus hendrerit arcu, sed vestibulum justo tempor a. Praesent sit amet odio ligula. Morbi sit amet leo vestibulum neque bibendum ullamcorper sed ut ante. Vestibulum id diam quis ipsum aliquet vestibulum. Donec vulputate auctor pharetra.</p> 
      <a href="#" class="btn btn-large btn-primary">Learn More</a> 
     </div> 
    </div>

EDIT: He aquí otro ejemplo de ello. http://www.screenlight.tv/ Si cambia el tamaño de su ventana en esa página, el encabezado cambia de tamaño según corresponda. Intenté mirar la fuente y me está costando encontrarla.

Fuente

2012-03-11 Willem Ellis

Publicar un cierto código relevante por lo que se puede echar un vistazo. –

Bien, publiqué algunos –

¿Has añadido el CSS receptivo a tu página? No está incluido en el CSS predeterminado. – coreyward

Está bien que he descubierto éste hacia fuera. Para referencia futura, esto se hace usando la propiedad @media(max-width: ). Entonces, por ejemplo, lo haría:

@media(max-width: 480px) { 
    h1 { 
    font-size: 12pt; 
    } 
}

O lo que necesite hacer. ¡Espero que esto ayude a alguien en el futuro! ¡Aclamaciones!

Fuente

2012-03-11 01:51:48

¿Ha intentado encenderlo a

<div class="container-fluid">

Fuente

2012-03-11 01:19:14

Sí, lo siento, se supone que es fluido contenedor. Copié su hoja de estilo bootstrap que es esencialmente bootstrap.css y bootstrap-responsive.css machacado en un archivo y lo intenté y funciona, pero aún no entiendo por qué el mío no funcionará. –

¿Por casualidad lo tiene en línea en cualquier lugar donde podamos echarle un vistazo? –

Según se indica here, bootstrap no es compatible actualmente con el tamaño de fuente de respuesta inmediata. El ya mostrado @media(max-width:) es el camino a seguir.

Fuente

2013-01-05 03:10:45 Drew

Explique a qué se refiere con "Lo que ya se muestra ..." y agregue más código para demostrar la solución. – gfullam

Si se trata de una foto de encabezado de imagen (sin texto), usar `class =" img-responsive "también funciona. Es decir:

<div class="container-fluid"> 
<div class="row"> 
<img src="/images/sample_photo.jpg" class="img-responsive"> 
</div> 
</div>

muestra en vivo aquí: http://www.bootply.com/Cc0rdXsJXP

Fuente

2015-05-26 03:57:19 SM23

¿Cómo puedo hacer que mis encabezados de página cambien de tamaño con el diseño receptivo?

Respuesta

Cuestiones relacionadas