PX為機關
在Web頁面初期制作中，我們都是使用“px”來設定我們的文本，因為他比較穩定和精确。但是這種方法存在一個問題，當使用者在浏覽器中浏覽我們制作的Web頁面時，他改變了浏覽器的字型大小，這時會使用我們的Web頁面布局被打破。這樣對于那些關心自己網站可用性的使用者來說，就是一個大問題了。是以，這時就提出了使用“em”來定義Web頁面的字型
Em為機關
這種技術需要一個參考點，一般都是以<body>的“font-size”為基準。比如說我們使用“1em”等于“10px”來改變預設值“1em=16px”，這樣一來，我們設定字型大小相當于“14px”時，隻需要将其值設定為“1.4em”。
body{ font-size:62.5%;} /*10/16*100%*/
.font1{ font-size:1.2em;}
.font2{ font-size:12px;}
Rem為機關
CSS3的出現，他同時引進了一些新的機關，包括我們今天所說的rem。
前面說了“em”是相對于其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對于根元素<html>
代碼執行個體：
html{font-size:62.5% ;}
.fon1{ font-size:1.2rem;}
.fon2{ font-size:12px;}
參考下圖：
但也想相容IE下的效果，可你可考慮“px”和“rem”一起使用，用"px"來實作IE6-8下的效果，然後使用“Rem”來實作代浏覽器的效果
![Vue rem 适配方案[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)