mobile webiste 中的css的font-size em及line-height等換算

世有因果知因求果發表於2015-09-07

  在mobile web設計 中,我們常常需要使用em這個字型大小的單位。em到底是多少呢?

em到底應該設定為多少個em呢?通常換算成方法是1em=target fontsize we want/fontsize of containing element  ,比如我們設定html tag的font-size為預設的16px, 為了換算方便,我們把body的font-size設定為10px,也就是說browser的預設font-size為10px,對於body來說,其context就為html的font-size(16px),因此body{font-size: 62.5%;/*1em=10px作為基線*/}h1希望設定為30px,則h1的em值應該設定為30px/10px=3em

當在一個element上設定flexible margin時,context是元素的container的width

當在一個element上設定flexible padding時,context是元素本身的width!

fluid site: Fluid grid, Relative values(percentages);

對於line-height屬性我們也可以設定為em和300%的百分比或者直接為3的數字,這個百分比和數字的區別在於300%要先根據font-size計算後再繼承進line-height中,而3這個數字則直接從font-size中繼承

 

相關文章