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

  在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中继承

 

posted @ 2015-09-07 16:30  世有因果知因求果  阅读(397)  评论(0编辑  收藏  举报