Javascript 如何使div中的文本相对于div'；宽度和高度、CSS、HTML

我试图使div中的文本相对于div的大小，这样当你放大文本时，文本会随着div变大，当你缩小文本时，文本会随着div变小。例如，如果你在stackoverflow上同时点击ctr和-，并缩小到25%，您可以看到，文本随着div收缩，一直收缩到25%，而不仅仅是文本收缩或div收缩-它们同时收缩。我正试图得到那种效果。谢谢

div {
width: 50%;
height: 50%;
font-size: 12%;
}

<div> Text </div>

div{
宽度：50%；
身高：50%；
字体大小：12%；
}
正文

尝试

em

基于

font size

显示如下，它将是相对的

请检查工作示例

试一试

HTML
一些文本
CSS
html{
字体大小：100%；/*默认情况下通常为16px*/
}
正文{font size:0.75em；//12px}
div{
宽度：50%；
身高：50%；
字号：1em；
颜色：#ff0000；
}

---

并根据您的需要自定义body和div的字体。

这不是所有浏览器都内置的功能吗？@Teemu如果您的html代码没有做到这一点，则不会。您是否尝试过使用动态字体大小单位（em）检查相对字体大小@Alexis OK。问题出在这里。当我放大时，div的大小不会随着文本的增加而增加。你看到缩小时div不会变小吗？或者当你放大时，div不会变大？当你放大或缩小时，我需要div变大或变小。里面的文本也会随之变大或变小。我在fiddle中试用了这个CSS，它可以放大/缩小。链接：你能试着发布你所说的两种场景的截图吗？

body {
    font-size: 16px;  /* declare base font-size. */
}

div {
width: 50%;
height: 50%;
font-size: 1em;
}

HTML
<div>some text</div>
CSS
html {    
    font-size: 100%;  /* this is usually 16px by default*/
}

body { font-size: 0.75em; // 12px }

div {
width: 50%;
height: 50%;
font-size: 1em;
color:#ff0000;
}