如何使h1标签响应背景图像(随着背景，h1标签缩小和扩展)

Question

我在jumbotron中有一个背景图像以及h1标签。当我调整图像大小时，h1标签不会调整大小，并且与背景中的图像重叠

.jumbotron h1 {
  font-size: 45px;
}
.jumbotron {
  background-image: url("header.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
}

<div class="container">
  <!-- Jumbotron Header -->
  <div>
    <header class="jumbotron">
      <h1> Hello, how May I help you.</h1>
      <h1>Happy to help you<br>
       <img src="prime.png" class="img-responsive" alt="flower">
	</header>
 <div> 
</div>

Answer 1

你将不得不使用javascript来缩小字体大小。

如果您当前正在调整整个窗口的大小以缩小图像，则只需添加以下内容：

window.addEventListener('resize', function() {
    var h1 = document.getElementById("jumbo-h1");  //I made up an id for simplicity
    var width = document.getElementsByClassName("jumbotron")[0].offsetWidth;
    if (width > 600) {
       h1.style['font-size'] = "45px";
    } else if (width > 400 && width <= 600) {
       h1.style['font-size'] = "35px";
    } else {
       h1.style['font-size'] = "25px";
    }
}

如果你使用的是jQuery，这会变得更加干净：

$(window).on('resize',function(){
    var $h1 = $(".jumbotron h1");         //note that ID is not needed
    var width = $(".jumbotron").width();
    if (width > 600) {
        $h1.css({"font-size": "45px"});
    } else is (width > 400 && width <= 600) {
        $h1.css({"font-size": "35px"});
    } else {
        $h1.css({"font-size": "25px"});
    }
});

显然，尽情

地玩弄尺寸/截止点，以获得您想要的外观。

如果您以其他方式调整巨型机器人的大小，只需将我提供的处理程序中的代码移动到它自己的函数中，并在需要时调用它（同时还传递对窗口调整大小处理程序的引用）

Answer 2

我在 Codepen 上有两个演示，探讨了缩放文本的概念。

http://codepen.io/denmch/pen/MYZqXB

http://codepen.io/denmch/pen/EaGMYZ/

您可以检查 CSS 并自行使用概念，但基本思想是使用正常度量（em、rem、px...）和 vw（基于视口宽度的测量）的组合来计算字体大小，这将生成响应视口的比例文本大小。下面是一个示例：

h1 {
  font-size: calc(1rem + 3.5vw);
}

Mike Riethmuller也探索了这个想法，他做了很多伟大的工作，甚至显然有关于这个主题的视频。

这被认为是实验性的，但除了Opera Mini之外，你应该在任何地方都很好。