html - 字体大小相对于父级的大小

Question

我有一个容器，它可以有不同的大小，具体取决于用户如何在屏幕上移动某些元素。在这个容器内有一个图像和一个文本。图像填充容器高度的 80%，文本应填充另外 20%。虽然 height: 80% 对图像效果很好，但 font-size: 20% 对文本不起作用。我不能使用 vm 或 vh，因为大小与屏幕大小无关。

Answer 1

我发现这个链接应该有用:LINK

flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};

@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}

body, html {
    height:100%;
    width:100%;
    font-family: "San Francisco";
    font-weight: 200
}
.flexFont {
    height:8em;
    width:75%;
    background-color:#eeeeee;
    padding:1%;
    margin: 10px;
}

.smaller {
    font-size: 0.7em;
    background-color:red;
    width: 10em;
}

<div class="flexFont">
    <h2>This is FlexText:<br>Autoscaling by DIV width</h2>
    <div class='smaller'>... scaled by 0.7em</div>
</div>

<div class="flexFont">
    <p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>

如果不使用 VM/VH，您将需要结合使用 javascript 和 CSS 来实现此目的。上面的代码应该有助于您实现目标。