-
-
值不固定
-
浏览器默认字号16px,未经调整的浏览器都符合:1rem = 16px
-
是css3新增单位,IE8及更早版本浏览器中不兼容
-
-
% 百分比
-
相对长度单位
-
相对父元素来说的
-
<!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> <style> html { /* font-size: 100px; */ font-size: 200px; } .wrap { width: 500px; height: 500px; background-color: aqua; font-size: 20px; } .wrap .box { background-color: tomato; /* 1.px */ /* width: 100px; height: 100px; */ /* 2.em 4*20*/ /* width: 4em; height: 4em; */ /* 3.rem 1*200*/ /* width: 1rem; height: 1rem; */ /* 4.百分比 */ width: 50%; height: 50%; } </style> </head> <body> <!-- px 固定值 相对屏幕分辨率 em 相对单位 相对父元素的font-size 1em =16px rem 相对单位 相对html根元素的font-size 1rem =16px 未调整 百分比 相对单位 相对父元素 --> <div class="wrap"> <div class="box"></div> </div> </body> </html>