引导3文本中的集装箱在整个宽度图像

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

所以我只是想知道如果我这样做的最有效的方式。我觉得bootstrap应该有一些东西来解决这个问题，我只是错过了，但这是我可以想出的最好的解决方案（警告：代码仍然是一个工作进行中，不讨厌我贫穷的JS/JQuery = d）

因此，这里是我的BootPly与解决方案，我想出了： http://www.bootply.com/bdS9H3otpi

我希望有人会喜欢，男孩哦，这是矫枉过正只是做X，但对我来说我的生活想不出X会是什么。

P.S.我的问题基本上由我自己回答，我只是希望有一个更清洁的解决方案。如果没有人能拿出一个我只是清理的JQuery/Javascript代码并把它作为是

来源

2015-12-23 Rob R.

首先是所有的JS在Firefox没有工作，什么JS的做，你可以通过CSS实现...我工作的小提琴现在张贴的答案...顺便说一句设计不值得所有这些努力中...手机和平板电脑的图像，如果用bg颜色代替它，图像效果会更好。 –

首先是没有必要的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。

来源

2015-12-23 06:43:33

因此，我只是为不同的屏幕尺寸添加不同大小的标题图像？什么时候他们之间的屏幕尺寸（即：调整桌面上的浏览器窗口）？ –

我们做响应图像的原因是加载在手机和平板电脑的数据较少......有关桌面，你将有3个图像 2-为1320 3- 1000 我建议让他们连1 如此你将有总计一个大图像，一个平板电脑，一个手机。 –

我编辑了我的答案，只显示3张图片 –

引导3文本中的集装箱在整个宽度图像

回答

相关问题