如何创建同时适用于大屏幕和小屏幕的大标题？

Question

我正在制作网页主标题。我想设置一个 100% 高度的背景图片和一个大标题在它的前面。

我是这样做的：

在 CSS 文件中：

body, html {
  height: 100%;
}

.bg {
  background-image: url("../img/image.JPG");
  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
}

.bigtitle {
     /**    padding-left:15%;***/ 
        padding-top: 20%;

color: white; 
font-family: 'Trocchi', serif; 
font-size: 1500%; 
font-weight: normal; 
margin: 0;

/*line-height: 1.0em;*/
}

在 HTML 文件中：

<div class="bg">
    <center><h1 class="bigtitle">My title</h1></center>
</div>

我也试过用em设置标题的大小，但还是一样的问题。

这在桌面上很好，但在移动设备或小屏幕上完全失败。如何才能同时在移动设备和桌面设备上工作？

Answer 1

尝试使用这个，我没有问题，你可以设置你想要的高度，应该在移动和桌面上工作。

.bg {
  background-image: url("../img/image.JPG");
  height: calc(100vh);
  width: auto;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
}

Answer 2

去掉高度，那么你的图像将等于background-size: cover;

.bg {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
}

https://jsfiddle.net/bw7xmytp/

Answer 3

我想把它留作评论，但我还没有权限：您可以使用 css 中的媒体查询根据不同屏幕尺寸的喜好手动调整标题的大小。虽然它们可能不是增加响应能力的最有效方式，但它们为我创造了奇迹。

如何创建同时适用于大屏幕和小屏幕的大标题？

How to create a big title which works on big and on small screens as well?

html

css

responsive-design

twitter-bootstrap

responsive