1、在說到百分比是前，先簡單了解下基本的單位
英寸（inch） ：in 1 in=2.54cm
厘米（centimeter）：cm
毫米（millimeter）：mm
磅（point）：pt 1pt=1/72 in
皮卡（pica）:pc 1pc==12 pt
像素（pixel unit）：px 1px=0.75 pt
相對長度單位(相對於當前對象內文本的字體尺寸)：em 1em=16px
CSS3新增的一個相對單位root em: rem 1rem=16px
注意：如果是定位的元素，則是相對最近的定位父級元素
應用場景
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em
實例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。
不幸的是，仍然是IE瀏覽器的問題。調整文本的大小時，會比正常的尺寸更大或更小。
解決方法
使用百分比和EM組合
在所有瀏覽器的解決方案中，設置 <body>元素的默認字體大小的是百分比：
實例
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，並允許所有瀏覽器縮放文本的大小。
方法二
瀏覽器默認字體16px，我們可以設置，body的字體大小為10px，然后1em就是10px，有利於換算
body{ font-size：62.5%；} //換算一下10px*100%/16px=62.5%===》》相當於10px,1em=10px
h1 {font-size:4em} //40px
h6 {font-size:1.2em} //12px