javascript - Bootstrap 3 容器内的文本覆盖全 Angular 图像

Question

所以我的图形艺术家想出了一个布局，但我却很难想出一个干净的解决方案。基本上他们想要一个全宽响应图像，上面有文字。但文本必须左对齐并适合 container div，而不是全宽。我还需要照顾手机/平板电脑/等。所以我必须确保字体大小也适用于所有设备(因此在 JQuery/JS 中调整字体大小)。

所以我只是想知道我这样做是否是最有效的方法。我觉得 bootstrap 应该有办法解决这个问题，而我只是错过了它，但这是我能想到的最好的解决方案(警告:代码仍在进行中，不要因为糟糕的 JS/JQuery 而恨我=D)

这是我的 BootPly 和我想出的解决方案: http://www.bootply.com/bdS9H3otpi

我希望有人会说，天哪，做 X 太过分了，但我这辈子都想不出 X 会是什么。

附言我的问题基本上是我自己回答的，我只是希望有一个更清洁的解决方案。如果没有人能想出一个，我将只清理 JQuery/Javascript 代码并按原样使用它

Answer 1

首先不需要JS。

1-主体部分以图片为背景，文字为标题(h1)

2- 仅用于响应式 CSS

例如

#newsHeaderTitle{
  color:white;
  height:100%;
  margin:0;
  font-size:350%;
   line-height:350%;
}
/* image BG image */

@media only screen and (max-width : 1200px) {
    #newsHeaderTitle{font-size:350%;line-height:300%;}
}

@media only screen and (max-width : 992px) {
    #newsHeaderTitle{font-size:300%;line-height:350%;}
}

@media only screen and (max-width : 768px) {
    #newsHeaderTitle{font-size:200%;line-height:350%;}
    /* image BG tablet image */
}

@media only screen and (max-width : 480px) {
    #newsHeaderTitle{font-size:100%;line-height:100%;}
    /* image BG mobile image */
}

尝试在 EM 中使用所有高度和尺寸，这比 % 好不要在 html 中添加 CSS。