css裡px、em、rem的區別和應用
阿新 • • 發佈：2018-12-23
第一：px，em，rem的區別在哪？
Px是一個絕對字型大小
em則是基於基數（比如：1.5em）來計算出來的相對字型大小。這個基數是需要乘以當前物件從其父級遺傳字型大小。
rem是基於根節點（比如html）的字型大小進行計算的。
先說em 如果你的預設父級容器字型為16px ，那麼2em=2*16px
<div class="parent" style="font-size: 16px">
<p style="font-size: 2em">我是em測試</p>
</div>rem預設字型大小是依據你網站當前訪問時所使用的瀏覽器或者其他裝置來決定的,特別適合響應設計，受到了移動設計的追捧
<!DOCTYPE html>
<html style="font-size: 14px">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="parent" style="font-size: 16px">
<p style="font-size: 2em">我是em測試</p>
<p style="font-size: 2rem" 在網上看到
為了更方便的進行計算轉換，你可以把預設字型大小設定成62.5%或者是10px方便了計算
大多數瀏覽器（不包括ie8以下）都支援rem單位的字型大小
如果想支援可以，如下：
html { font-size: 62.5%; }
p { font-size: 15px; font-size: 1.5rem; }