Question

我正在尝试在幻灯片上放置一些文字，并确保字体的大小有响应。我发现了这个问题：

How to create responsive text on top of an image?

这与我想要完成的非常相似。我一直在努力使用字体大小和行高百分比，但它似乎没有做任何事情。到目前为止，我的代码看起来像这样：

HTML：

<div>
 <div>
  <div class="ec_slideshow">
   <ul class="bxslider"> <!--slideshow that I found on the interwebz-->
    <li><div class="ec_slidecontainer">
     <img src="http://enviroptics.com/Matt/Transparent%20photos%20in%20progress/Vision_System_Flow_Cell_1200x400.png" alt=""/>

     <!--This is the text that I want to be responsive-->
     <h2 class="ec_slidecontent"><span>Bubble Analysis<br/>Possible Subtext</span></h2>
     <!--End of text that I want to be responsive-->

    </div></li>
   </ul>

CSS：

    .ec_slideshow {
    width: auto;
    max-width: 1200px;
    height: auto;
    border: 2px solid black;
    /*background-color: cyan;*/
    text-align: center;
    font-size: 20px;
    margin: 20px auto 0px auto;
    padding-bottom: 0px;
    z-index: 1 !important;
    }

    .ec_slidecontent span {
    position:    absolute !important;
    top:         0px;
    left:        30%;
    font-family: 'roboto' !important;
    font-size:   100% !important;
    color:       #fff !important;
    padding:     3px 10px !important;
    width:       40% !important;
    line-height: 100% !important;
    background:  rgb(0, 0, 0);
    background:  rgba(0, 0, 0, 0.7);
    }

   .ec_slidecontent {
   margin: 0px !important;
   padding: 0px !important;


   .ec_slidecontainer img { 
    position: relative; 
    width: 100%; /* for IE 6 */
    }

在这个页面中还有其他HTML元素和css和js的东西，所以也许字体相关的东西是从其他地方继承的，或者我可能根本不知道我在做什么。无论哪种方式，最简单的方法是查看此页面http://www.enviroptics.com/envirocam.html并调整窗口大小以查看正在发生的情况。

Answer 1

请勿使用像素作为字体大小。尝试使用em，rem或基于％的值而不是像素。

您也可以参考此链接https://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/

Answer 2

这是我过去在这种情况下使用过的辅助函数。我希望jQuery可以为您提供使其工作所需的数字！这允许您在rems中设置字体大小（这意味着它基于html字体大小），然后在调整屏幕大小时修改html元素字体。 ScreenWidth可以是浏览器窗口的宽度，也可以是包含内容的元素的宽度。

function getFontSize(screenWidth) {
    "use strict";
    var fontSize = 10,   // this is the base font size. All other sizes are computed based on this number
        maxWidth = 1024, // max size of content on a page
        minSize = 5;     // smallest base font size allowed

    if (screenWidth < maxWidth) {
        // font size is computed by the ratio of screenWidth to maxWidth
        fontSize = Math.max((screenWidth / maxWidth) * fontSize, minSize);
    }

    return fontSize; //font-size is then applied to the html element of your page
}

如何创建响应式字体大小

2 个答案: