The difference between px, em and rem

They are all used to set the size of the font and the width and height of the box, but px will not change due to changes in browser size, while em and rem will change due to changes in browser size.

In the process of writing code, we often use size units when defining the size of fonts or the width and height of elements in CSS. Today we will introduce in detail the common units in CSS. The name of the size unit and its usage have certain reference value. I hope it will be helpful to everyone.

【Recommended course: CSS Tutorial】

##px

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

Example: Set the width to 200px and the height to 200px for a div element

div{
width:200px;
height:200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 16px;

		}

The effect is as follows:

em

em is a relative length unit, which is relative to the font size of the text within the current object. If we have not set the font size of the current text, then em will be relative to the default font size of the browser

The default font size in the browser is 16px, in other words 1em=16px, generally when we write Em units are often used in adaptive layout. Simplify the code by setting the font-size value in the body selector in CSS so that all ems on the page are relative to the body value.

Example: Set the width to 100px and the height to 100px for the div element by changing the size unit to em

1em=16px, so 100px=6.25em

<style>
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
</style>

Effect Picture:

We can also set a value directly to the body so that its value is directly relative to the body, and then divide the original px value by 10. The value of em

body{
font-size: 62.5%
	}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
</style>

Rendering:

It can be seen from the above figure that the value of em is not fixed and is relative to his parent Level element size

#rem:

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.

Example: Set the width to 100px and the height to 100px for the div element by changing the size unit to rem

body{
		font-size:10px;
	}
		div{
			width:15rem;
			height:15rem;
			border:0.01rem solid pink;
			text-align: center;
			line-height: 15rem;
			font-size: 2rem;
		}

Rendering:

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of The difference between px, em and rem. For more information, please follow other related articles on the PHP Chinese website!