有时候需要显示小于12px的图标,按正常写css的方式,在ios上显示正常,在安卓上,图片则会变形。原因是安卓部分机器分辨率都不高,导致显示模糊变形。可以通过把宽高变大一倍,再用缩放属性,把宽高缩小一半的方式,这样实现出来的图片不会变形。
例如:
width:10px;
height:10px;
border-radius:50%
会发现,在ios中图片显示正常,安卓手机上有的会变成椭圆。所以,要通过缩放的方式来兼容安卓机上的显示。
width:20px;
height:20px;
border-radius:50%;
transform:scale(0.5);
transform语法
值 | 描述 |
---|---|
scale(x,y) | 定义 2D 缩放转换。 |