最近在参加一个需求开发的时候，发现了一个问题：使用css画的小圆在真机上变成不规则的圆。

问题概述

看看下面这个效果：

左上角的这个不规则圆形，我给它设置的css样式是这样的：

.radio {
      width: rem(14);
      height: rem(14);
      border: rem(3) solid #999aaa;
}

很明显我设置的样式是圆形的样式，但是却没有达到我想要的效果，这是为什么呢？

经过同事提醒：这是移动端计算精度的问题，由于我们在移动端使用的rem是经过换算而得出的。而我们目前的计算基数是有问题的。

解决方案

解决方案一般有以下两种：

  1. 很多文章指出直接用px，但是这样做无法达到适配的目的；
  2. 使用svg icon，既可以适配，即使再小的圆形也能在不同屏幕上完美展示。

但是我在今天在使用图片的时候，发现还是会出现计算错误，于是最后直接使用px，完美解决问题。