rem與em的區別及rem的js演算法
阿新 • • 發佈：2018-12-23
1.rem與em的區別
em 是一個參照自身字型的是一個單位，先去找自身的字型大小，如果自身沒有字型大小，找父元素；rem是一個參照html字型大小的一個單位。
上述程式碼中，當span的font-size和width的單位是rem時，參照的是html字型大小，故其值為2*20px；當span的font-size和width的單位是em時，參照的是父元素box字型大小，故其值為2*10px。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html { font-size: 20px; } .box { font-size: 10px; } span { font-size: 2rem; /*font-size: 2em;*/ width: 2rem; /*width: 2em;*/ display: block; } </style> </head> <body> <div class="box"> <span>say lalalalalalalala</span> </div> </body> </html>