html - 用文本制作 bootstrap header

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">		
    <div class="header">
        <h1 class="title">ACCENTOMETER</h1>
        <button class="btn btn-default header-scroll">PLAY NOW</button>
    </div>
</div>

Answer 1

CSS3 支持与视口(viewport)相关的新维度。但这在 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)宽度和视口(viewport)高度。你可以查看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;
}