制作相对于响应式图像的响应式文本？答案

【问题标题】：Make responsive text relative to responsive image?制作相对于响应式图像的响应式文本？
【发布时间】：2015-06-11 17:08:06
【问题描述】：

我正在尝试使图像具有响应性，并使文本也具有响应性，但以相对方式对齐，以便匹配并且不会破坏输出。

这是我的html：

.checks { 
  position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
  position: absolute;
  display: inline-block;
  bottom: 80%;
  font-family: 'museo_slab500';
  font-size: 150%;
  color: #fff;
  padding: 0 20px;
  width: 50;
  line-height: 150%;
}

<div class="checks">
  <img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max-    width:100%"/>
  <h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>

我做错了什么？

【问题讨论】：

您的 HTML 充满了错误。您应该更正您的 HTML，链接到可见的图像并将其放到 jsfiddle 之类的东西上，这样我们就可以看到发生了什么
这是如何响应的？

标签： html css responsive-design containers

【解决方案1】：

您可以使用 '%' 比如 100% 等来使图像响应。

但是你不能对文本做同样的事情来使其具有响应性。

您需要使用“em”或“rem”等单位而不是“%”或“px”来使文本具有响应性。

顺便说一句，16px = 1em 或 1rem。有关更多信息，请进一步搜索有关 css 单位“rem”和“em”的信息。

所以你应该使用：

font-size: 1rem; 

//or 

font-size = 1em;

.competitive {

    position: absolute; // use relative instead of absolute to make class'competitive' relative to parent.
    display: inline-block;
    bottom: 80%;
    font-family: 'museo_slab500';
    font-size: 3em;  // Or use 'rem' to make text responsive.
    color: #fff;
    padding: 0 20px;
    width: 50;
    line-height: 150%;
}

【讨论】：

【解决方案2】：

我制作了这个jsfiddle 示例来演示我理解的您的问题。由于您的问题太模糊而无法理解，因此这可能不是您想要的解决方案。此外，这不是一个完整的答案，只是帮助您入门。

我认为您想要的是保留文本 3 Tiered Quality Review Process 以保持在顶部栗色图像上，即使窗口大小发生变化。

如果您不想要此解决方案，请通知我。并且请更改您的问题，以便其他用户正确理解。

您在 jsfiddle 中看到的答案是这个 javascript，它将您的竞争容器调整为您的检查 div。

window.onresize = resizeText;

function resizeText()
{
    var heightPercentage = 10; //Make the height 10% of parent
    var widthPercentage = 100; //Make the width 100% of parent i.e. full width

    var parentHeight = $(".checks").height();
    var parentWidth = $(".checks").width();

    $(".competitive").css("height", parentHeight * (heightPercentage / 100) + "px");
    $(".competitive").css("width", parentWidth * (widthPercentage / 100) + "px");
}

然后我在你的 css 中包含了这些行 @media all and (min-width: 50px) { body { font-size:5px; } } 以根据窗口大小调整字体大小。您可以玩弄这个并添加更多这些以涵盖所有可能的情况。请注意，这取决于您的窗口的最大和最小高度/宽度。

还要检查与您的问题密切相关的this 答案（IMO）

我还强烈建议对任何响应式 css 使用 bootstrap。

【讨论】：

这是我第一次上栈。基本上我需要的是文字留在栗色中，永远不会变成另一种颜色，并且永远不会与支票重叠。我最终会有多行文本。
@mysizelearner 好的，我知道你想要什么。如果可以的话，我会帮助你。那么响应式设计是什么意思。您的图像是否正在调整大小？如果是，那么它是以各种可能的方式（不同的宽度和高度）调整大小还是仅以某种方式（如大、中、小等）调整大小。如果是后者，那么最好只用三种不同的变化对图像进行 Photoshop并完成它。如果是前者，那么告诉我，是图像调整大小还是窗口调整大小，图像随窗口调整大小？

【解决方案3】：

.checks { 
  position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
  position: absolute;
  display: inline-block;
  bottom: 80%;
  font-family: 'museo_slab500';
  font-size: 150%;
  color: #fff;
  padding: 0 20px;
  width: 50;
  line-height: 150%;
}

<div class="checks">
  <img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max-    width:100%"/>
  <h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>

【讨论】：