Home > Article > Web Front-end > What are the characteristics of rem in css
What are the characteristics of rem in css
- 王林Original
- 2020-11-11 10:58:193360browse
The characteristic of rem in css is: when using rem to set the font size for an element, it is still a relative size, but relative to the HTML root element, such as [.b{font-size: 2rem; //here Just 8px;}].
The operating environment of this tutorial: Windows 10 system, CSS3, this article is applicable to all brands of computers.
rem: (relative to the root element, that is, HTML)
rem is a new relative unit in CSS3. The difference between it and em is that when using rem to set the font size for an element, Still a relative size, but relative only to the HTML root element. Its use is very simple. You can change its value by changing the size of the root element (rem and em are similar, but the relative elements are different)
(Learning video sharing: java video tutorial )
px: (fixed)
px is the abbreviation of pixel, which means pixel. It is used when specifying the font size and the width and height of the element. . Pixels are relative to the monitor screen resolution
em: (relative to the parent element)
em is a relative length unit, which is relative to the font size of the text within the current object . If we do not set the font size of the current text, then em will be relative to the browser's default font size
Code example:
//em的值时相对于父元素，修改.a的大小，.b的大小会随之发生变化
<style>
.a{
font-size: 4px; //1em=4px
}
.b{
font-size: 2rem; //这里就8px;
}
</style>
</head>
<body>
<div class="a">
<p class="b">
51515
</p>
</div>
</body>Related recommendations:CSS tutorial
The above is the detailed content of What are the characteristics of rem in css. For more information, please follow other related articles on the PHP Chinese website!