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的组合来实现。上面的代码应该可以帮助您实现目标。

Answer 2

为font-size使用百分比会根据文档的当前字体大小来调整字体（它不会调整字体来占用容器的百分比）。检出CSS Font-Size: em vs px vs pt vs percent。

例如：

/* current font-size for the document */ 
html {
  font-size: 20px;
}

/* results in 4px font-size for this div */
div {
  font-size: 20%;
}

相对于父字体大小的字体大小

2 个答案: