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支持相对于视口的新维度。但这不适用于android＆lt; 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;
}

Answer 2

在小型设备上尝试为此设备添加色域宽度

<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 3

您可以使用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;

}

用文本制作bootstrap标头

3 个答案: