代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
#b {
font-size: 100%;
}
#c {
font-size: 200%;
}
#A {
}
#B {
font-size: 100%;
}
#C {
font-size: 150%;
}
#D {
font-size: 200%;
}
</style>
</head>
<body>
<p>夏天</p>
<p id="b">夏天</p>
<p id="c">夏天</p>
<div id="A">
夏天
<p id="B">夏天</p>
</div>
<div id="C">
夏天
<p id="D">夏天</p>
</div>
</body>
</html>
效果:
- 如果没有父级元素或者父级元素为原大小,100%为原大小
- 参照物有两个,一个为父级元素一个为浏览器原字体大小