Bootstrap-Header mit Text erstellen

Question

Bei kleineren Geräten wird title nicht angezeigt. Wenn ich die Seite neu lade, sieht es für eine Sekunde gut aus, dann läuft es über. Gibt es etwas, an das ich nicht gedacht habe?

Ich versuche, einen Vollbild-Header mit Text zu machen und einen Knopf, und das ist, was ich bisher getan haben:

/*body, html { 
 
    height: 100%; 
 
}*/ 
 

 
body { 
 
    margin: 0px 0px; 
 
} 
 

 
#full { 
 
    background-image:url(https://chrisaam.files.wordpress.com/2015/03/wallpaper-2846361.jpg); 
 
    background-size:cover; 
 
    position: relative; 
 
    height:100vh; 
 
} 
 

 
.header { 
 
    position: absolute; 
 
    top: 50%; 
 
    text-align: center; 
 
    width: 100%; 
 
    color: #fff; 
 
    font-size: 36px; 
 
    -ms-transform: translate(0,-50%); /* IE 9 */ 
 
    -webkit-transform: translate(0,-50%); /* Safari */ 
 
    transform: translate(0,-50%); 
 
}

<div id="full"> \t \t 
 
    <div class="header"> 
 
     <h1 class="title">ACCENTOMETER</h1> 
 
     <button class="btn btn-default header-scroll">PLAY NOW</button> 
 
    </div> 
 
</div>

Answer 1

Auf kleinen Gerät Versuchen Sie, für col Breite dieses Gerät

<div id="full">  
    <div class="header col-sm-12 col-xs-12 " > 
     <h1 class="title col-xs-12">ACCENTOMETER</h1> 
     <button class="btn btn-default header-scroll col-xs-12">PLAY NOW</button> 
    </div> 
</div> 

Answer 2

können Sie den Titel unter Verwendung von Javascript, zusammen mit CSS-stil~~POS=TRUNC ansprechbar machen.

Zuerst müssen Sie die Breite Ihres Browserfensters erhalten. Dann machen Sie eine geeignete Formel für eine responsive_font mit Fensterbreite Größe.

Mit responsive_font können Sie Ihren Titel reagieren.

Beispiel:

function title_fontsize(){ 

var title=document.getElementById("mytitle"); 
var win_size=window.innerWidth; 
responsive_font=win_size/(20)+"px"; 
title.style.fontSize=responsive_font; 

} 

Answer 3

CSS3 unterstützt neue Dimensionen, die bezüglich Port anzuzeigen. Aber das funktioniert nicht in android < 4.4

Sie können Abmessungen in% oder em verwenden. Ändern Sie einfach die Grundschriftgröße alles wird sich ändern. Auf diese Weise ändert sich die Schriftgröße mit dem Gerät.

@media (max-width: @screen-xs) { 
    body{font-size: 10px;} 
} 

@media (max-width: @screen-sm) { 
    body{font-size: 14px;} 
} 

h5{ 
    font-size: 1.4em; 
} 

Blick auf allen Wegen bei https://stackoverflow.com/a/21981859/406659

können Sie auch einfache Abfragen Medien verwenden, um die Schriftgröße jeweils auf verschiedene Bildschirmgrößen zu ändern. Beispiel:

@media only screen and (max-width: 750px){ 

    .title{ 

    font-size: 30px; 
    } 
} 

Sie können auch mit Ansichtsfensterbreite und Ansichtsfensterhöhe herumspielen. Sie können Viewport Units für weitere Details überprüfen.

1vw = 1% of viewport width 

1vh = 1% of viewport height 

1vmin = 1vw or 1vh, whichever is smaller 

1vmax = 1vw or 1vh, whichever is larger 

h1 { 
    font-size: 5.9vw; 
} 
h2 { 
    font-size: 3.0vh; 
} 
p { 
    font-size: 2vmin; 
}