长度单位
概念
长度单位
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://www.bmabk.com/index.php/post/46408.html
