html { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } body { font-size: 1.4rem; /*1.4 × 10px = 14px */ } h1 { font-size: 2.4rem; /*2.4 × 10px = 24px*/ } html { font-size: 625%; /*100 ÷ 16 × 100% = 625%*/ } body { font-size: .14rem; /*0.14 × 100px = 14px */ } h1 { font-size: .24rem; /*0.24 × 100px = 24px*/ }
在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,若是没有设置,将是以“16px”为基准 )。从上面的计算结果,咱们使用“rem”就像使用“px”同样的方便,并且同时解决了“px”和“em”二者不一样之处。
注:在Chrome下,默认最下字体为12px,能够设置font-size: 625%,其余以此类推css