Question

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

所以我只是想知道我是否能以最有效的方式做到这一点。我觉得bootstrap应该有一些东西可以解决这个问题并且我错过了它，但这是我能想到的最好的解决方案（警告：代码仍在进行中，不要因为糟糕的JS而讨厌我/ JQuery = D）

所以这是我的BootPly和我提出的解决方案： http://www.bootply.com/bdS9H3otpi

我希望有人会喜欢，哦，男孩，只是做了X，但是对于我的生活，我想不出X会是什么。

P.S。我的问题基本上是我自己回答的，我只是希望有一个更清洁的解决方案。如果没有人可以提出一个我将清理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。

容器内的Bootstrap 3文本超全宽图像

1 个答案: