CSS长度单位：px、em、rem的理解 - 附带案例
长度单位
概念
长度单位px：相对于屏幕em：当前节点font-size 1em的标准取父节点的font-size长度，而当前节点的其他属性长度1em以当前节点的font-size长度为标准rem：1rem的长度为根节点的font-size长度为标准，【不像em那样涉及到父节点的标准】
示例讲解
<!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>
<script src="G:\VsCode\开源\jquery-3.5.1\jquery-3.5.1.min.js"></script>
<style>
html {
font-size: 30px;
color: rgb(236, 96, 96);
text-align: center;
}
html div {
margin: 0 auto;
}
button {
font-size: 40px;
}
#box1 {
width: 300px;
height: 300px;
font-size: 60px;
background-color: gold;
}
#box1 p {
font-size: 90px;
}
/* 当前节点的font-size取其父节点body的font-size即30px 所以这里font-size为60px ==> 当前节点的其他属性以当前节点的font-size的1em标准故 width=10em=600px height=10em=600px */
#box2 {
width: 10em;
height: 10em;
font-size: 2em;
background-color: black;
}
/**父节点box2的font-size为60px, 故此节点的font-size: 180px*/
#box2 p {
font-size: 3em;
}
/* 所有长度单位1rem的标准都取根节点<html>的font-size为1rem标准，故2rem=60px 10rem=300px */
#box3 {
width: 10rem;
height: 10rem;
font-size: 2rem;
background-color: aquamarine;
}
/* 所有长度单位1rem的标准都取根节点<html>的font-size为1rem标准，故2rem=60px*/
#box3 p {
font-size: 2rem;
}
</style>
</head>
<body>
<button id="btn0" >html根节点默认60px</button>
<button id="btn1">html根节点设为40px</button>
<button id="btn2">html根节点设为50px</button>
<div id="box1">
<p>你好1</p>
</div>
<div id="box2">
<p>你好2</p>
</div>
<div id="box3">
<p>你好3</p>
</div>
</body>
<script>
$(function () {
$("#btn0").click(() => {
$("html").css("font-size","60px");
});
$("#btn1").click(() => {
$("html").css("font-size","40px");
});
$("#btn2").click(() => {
$("html").css("font-size","50px");
});
});
</script>
</html>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_39651356/article/details/123103349
内容来源于网络，如有侵权，请联系作者删除！