使用em时会出现很多小数换算，要怎样才能方便的使用它？

Question

在手机的页面上，为了达到内容根据屏幕的自动缩放，会使用em取代px，但这样会出现很多小数，如下：

#wrapper {
                    font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/
                    width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/
                    height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/
                    border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/
                    margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/
                    padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/
                    line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/
                }

有什么好办法可以使得em像px那样，没有很多小数的使用那？

Answer 1

设置基础文字大小

html, body{
    font-size: 10px;
}

使用方式

#wrapper {
    font-size: 1.4em; /*等于字体大小为14px*/
}

不过为什么你的#wrapper先是1÷16*xx，后是1÷14*xx呢？

Answer 2

1em=16px 这是游览器的默认设置值，所以可以在html里设置font-size的值。让font-size:62.5%;这时候的1em=10px.