移动端 border-radius 绘制圆点不够圆 如何解决

在做项目中,经常会遇到用css绘制像素小圆点的需求,如下代码

.dotted{
	width:4px;
	height:4px;
	border-radius:50%;
	background:red;
}

在一般情况下,这种代码是没有问题的,但是如果你使用了px2rem之类的插件,就会发现在移动端上的圆点有的大,有的小.十分的难看

个人猜测原因是因为转换工具转出来的单位都是带小数点的,在css解析时候会出现问题

这时可以用以下代码解决问题

.dotted{
	width:1px;
	height:1px;
	border-radius:50%;
	transform:scale(4);
	background:red;
}

思路就是让宽高设为1像素的圆点放大到我们需要的尺寸,因为默认情况下所有px2rem之类的工具都不会去转换1px的css