rem與em都是相對(duì)單位贡必,我們使用它們的目的就是為了適應(yīng)各種手機(jī)屏幕实夹。
rem是根據(jù)html根節(jié)點(diǎn)來(lái)計(jì)算的批旺,而em是繼承父元素的字體。比如下面一個(gè)demo
第一個(gè)span繼承了它的父元素div的大小汹买,所以是14px,第二個(gè)span是通過(guò)html來(lái)計(jì)算的,所以是40px聊倔。第一個(gè)img繼承的body晦毙,第二個(gè)img根據(jù)html來(lái)計(jì)算。通過(guò)這個(gè)簡(jiǎn)單的例子我們得知上面的結(jié)論是正確的耙蔑。所以我們可以通過(guò)下面這種比例來(lái)對(duì)不同的手機(jī)屏幕做適配见妒。
比如iphone5上的rem基值為32px,則渲染一張64*64px的div甸陌,則用2rem*2rem渲染须揣,換算公式如下————
px/rem = 基值
對(duì)于一些固定的元素,我們不推薦使用rem钱豁,而改為使用px去確保在同一屏幕上保持一致耻卡,比如字體font-size,這個(gè)更趨向于閱讀的實(shí)用性,不適合排版布局田弥。
em 單位轉(zhuǎn)為像素值,取決于他們使用的字體大小靠抑。 此字體大小受從父元素繼承過(guò)來(lái)的字體大小凛澎,除非顯式重寫與一個(gè)具體單位霹肝。