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