Wie kann ich meine Seite Header Größe ändern mit responsive layout?

Also ich habe eine Website, die ich brauche, um funktional sein, sowohl auf mobilen Geräten und auf den Computern. Ich bin mit bootstrap-responsive und habe mittlerweile eine Menge Dinge zu arbeiten. Momentan bin ich der held-Einheit für die Vorderseite. Ich habe eine Seite mit header, ich möchte die auto-Skalierung nach der Größe des Displays. Die Haupt-bootstrap-Website - (http://twitter.github.com/bootstrap/) macht sowas, was ich tun will mit Ihren Haupt-Seite header. Jede Hilfe ist willkommen.

Relevante Code:

<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: Hier ist ein weiteres Beispiel. http://www.screenlight.tv/
Wenn Sie die Größe Ihrer Fenster auf dieser Seite, der header ändert sich entsprechend. Ich habe versucht, auf der Suche an der Quelle und ich habe eine harte Zeit, es zu finden.

Nach ein paar relevanten code, damit wir sehen können.
Okay habe ich geschrieben einige
Dd fügen Sie den responsive CSS auf Ihrer Seite? Es ist nicht enthalten in der Standard-CSS.
Ja, ich habe. Andere reagierende Funktionen arbeiten. Dies ist definitiv Teil der bootstrap-responsive?

InformationsquelleAutor Willem Ellis | 2012-03-11

  1. 25

    Okay, ich habe dieses herausgefunden. Für die Zukunft, dies geschieht mit Hilfe der @media(max-width: ) Eigenschaft. So zum Beispiel, würden Sie tun:

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

    Oder was auch immer Sie tun müssen. Hoffe, das hilft jemand in der Zukunft! Prost!

    InformationsquelleAutor Willem Ellis

  2. 8

    Wenn es ein Bild ist header-Foto (kein text betroffen), mit `class="img-responsive" so gut funktioniert. I. e:

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

    Live-Beispiel hier: http://www.bootply.com/Cc0rdXsJXP

    InformationsquelleAutor SM23

  3. 3

    Haben Sie versucht, wechseln Sie zu

      <div class="container-fluid">
    Ja sorry, es soll ein container-fluid. Ich kopierte Ihre bootstrap-stylesheet, das im wesentlichen bootstrap.css und bootstrap-responsive.css-püriert in einer Datei und versucht es und es funktioniert, aber ich verstehe immer noch nicht, warum mir nicht funktionieren.
    haben Sie zufällig haben diese online irgendwo wir könnten einen Blick nehmen?

    InformationsquelleAutor Jayson Lane

  4. 0

    Wie bereits hier, bootstrap unterstützt derzeit keine ansprechende Schriftgröße aus der box. Die bereits gezeigt @media(max-width: ) ist der Weg zu gehen.

    Erklären Sie bitte, was meinen Sie mit "Die schon gezeigt..." und/oder hinzufügen, mehr code zu zeigen, die Lösung.

    InformationsquelleAutor Drew

Schreibe einen Kommentar