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

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

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