移動端佈局字型單位的選擇之px、rem和em揭祕
一般我們在pc上主要是流動式佈局，採用的單位一般都是px，由於pc螢幕都是很大的，所以不用過多的擔心字型單位的選擇，但是在移動端呢？那麼這完全相反，由於手機螢幕較小，且各種螢幕尺寸你一不小心你佈局的樣式或者單位字型顯得過大這都不是很理想的。那麼我們就來說下移動端的字型選擇。
話不多說，直入主題，移動端佈局最常見的是單位解決方式，沒錯就是rem 這是我覺得最好的解決移動端字型或者容器的單位的很好的解決方法，當然你還可以用媒體查詢+em和px。先說下它們的區別：
px畫素（Pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。也是pc端常用的方式。
em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。特點：
1.em的值並不是固定的；
2. em會繼承父級元素的字型大小。
簡單點說它的大小是在父級的基礎上來放大縮小的。 rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算，其實你就可以把它當做html根字型單位，實際上專案裡也是這麼做的。重點來了：
因為任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。
為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。在專案裡的字型、容器（如div等）都可以 用rem,這樣的話它就能自己隨螢幕尺寸調節了。