如何创建一个在大屏幕和小屏幕上都适用的大标题？答案

【问题标题】：How to create a big title which works on big and on small screens as well?如何创建一个在大屏幕和小屏幕上都适用的大标题？
【发布时间】：2019-07-17 19:41:54
【问题描述】：

我正在制作网页主标题。我想设置一个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 设置标题的大小，但问题相同。

这在桌面上很好，但在移动或小屏幕尺寸上完全失败。如何在移动设备和台式机上工作？

【问题讨论】：

标签： html css twitter-bootstrap responsive-design responsive

【解决方案1】：

我只想将此作为评论，但我还没有权限：您可以使用 CSS 中的媒体查询手动调整标题的大小以适应不同的屏幕尺寸。尽管它们可能不是提高响应能力的最有效方式，但它们对我来说却创造了奇迹。

【讨论】：

媒体查询允许您准确设置您希望标题在任何特定屏幕尺寸下的尺寸。例如，在手机屏幕上，您可以缩小文字大小，使其不会超出屏幕。

【解决方案2】：

试试这个，我没问题，你可以设置你想要的高度，应该可以在手机和桌面上使用。

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

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

【讨论】：

这样背景效果很好，但是上面的文字在小屏幕上还是从背景图片中突出来，不可读。

【解决方案3】：

去掉高度，那么你的图片就等于 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/

【讨论】：

这是真的，但上面的文字在小屏幕上仍然无法阅读。