在做项目中,经常会遇到用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