<p>The following paragraphs contain the same text. The first one uses <code>ic</code> units to set the text size. The second one uses <code>ric</code> units. Since the first paragraph uses <code>ic</code> units, the text size of the first paragraph changes when you modify the <code>font-size</code> value of its parent element (<code>div</code>). The second paragraph changes when the value of <code>font-size</code> for the root element (<code>html</code>) changes. </p>
<div>
<p lang="zh" class="ic">鉴于承认人类大家庭所有成员的固有尊严以及平等和不可剥夺的权利是世界自由、正义与和平的基础</p>
<p lang="zh" class="ric">鉴于承认人类大家庭所有成员的固有尊严以及平等和不可剥夺的权利是世界自由、正义与和平的基础</p>
</div>
@import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap");
:root {
font: 100% / 1.3 helvetica, arial, sans-serif;
}
[lang="zh"] {
font-family: "ZCOOL KuaiLe", sans-serif;
}
div {
font-size: 1.6rem;
display: grid;
grid-template-columns: auto auto;
gap: 1ic;
}
p {
margin-block: 1rem;
}
.ic {
font-size: 2ic;
background: #fc06;
}
.ric {
font-size: 2ric;
background: #00f3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.