Создание заголовка начальной загрузки с текстом

Question

На небольших устройствах title выходит из-под экрана. Если я перезагружу страницу, она выглядит неплохо на секунду, тогда она переполняется. Есть ли что-то, что я не рассматривал?

Я пытаюсь сделать полный заголовок с текстом и кнопки на экране, и это то, что я сделал до сих пор:

/*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

На небольшой попытке устройства добавления ширины Col для это устройство

<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

Вы можете сделать заголовок отзывчивым с помощью JavaScript, а также свойств CSS стилей.

Сначала вам нужно получить ширину окна вашего браузера. Затем сделайте соответствующую формулу для responsive_font, используя размер ширины окна.

Используя responsive_font, вы можете изменить свое название.

Для примера:

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 поддерживает новые размеры, которые по отношению к порту просмотра. Но это не работает в android < 4.4

Вы можете использовать размеры в% или em. Просто измените размер базового шрифта, все изменится. Таким образом размер шрифта изменится с устройством.

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

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

h5{ 
    font-size: 1.4em; 
} 

Посмотрите на всех путях в https://stackoverflow.com/a/21981859/406659

Вы также можете использовать простые запросы средств массовой информации для изменения размера шрифта соответствующего различным размером экрана. Например:

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

    .title{ 

    font-size: 30px; 
    } 
} 

Вы также можете поиграть с шириной видового экрана и высотой видового экрана. Вы можете проверить Viewport Units для более подробной информации.

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; 
}