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

Question

我试图让div中的文本相对于div的大小，这样当你放大文本时，随着div变大，当你缩放文本时，文本会随着div变小。例如，如果你在堆栈溢出的同时点击ctr，放大到25%，你可以看到文本和div一起缩小到25%，相对于只缩小文本或div收缩--它们同时收缩。我正试着得到那样的效果。谢谢。

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

<div> Text </div>

Answer 1

尝试基于em的font-size显示，如下所示，它将是相对的。

请检查工作示例这里。

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

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

Answer 2

在http://jsfiddle.net/meghanagpal/fgoyt0ze/1/上试试小提琴

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;
}

并根据您的需要为主体和div定制字体。