dpq*_*dpq 2 css fonts font-size
假设我们有一个div元素,零填充,绝对定位,预定义宽度(以像素为单位)和一些纯文本.
现在,我们将文本的CSS font-size属性增加一个像素.我应该以什么方式增加div的宽度,使其布局保持不变(即由于宽度不成比例地增加,没有单词从一行跳到另一行)？
如果无法以像素为单位设置CSS字体大小,是应该在pt或em中设置,为什么？
您想要指定div的宽度和ems中的字体大小.下面是一个示例,以像素为单位更改字体大小会导致div和文本按比例调整大小而不更改布局:
<html>
<head>
<title>Proportional Resize Example</title>
<style>
body {font-size:10px}
div {
position:absolute;
top:100px;
left:100px;
width:20em;
font-size:2em;
padding:0;
background:green}
</style>
<head>
<body>
<div>
This text will resize proportionally.
This text will resize proportionally.
This text will resize proportionally.
</div>
</body>
</html>
在此示例中,如果更改body元素的字体大小,则所有内容都将按比例调整大小.这是因为我们用来指定div中的大小的ems是相对于body元素中的字体大小来测量的.增加body元素的字体大小会使div的宽度和字体大小都更大.