移动端图片变形问题

发表于   |   分类于

问题

星期五的时候遇到一个问题，就是在做移动端适配时，一些小图标在安卓手机下会出现变形的问题，如下图

注意看红色的小圆圈，本来应该都是圆形，但有些变成了椭圆。

因为使用的是rem作为长度单位，在网上查找资料之后发现，rem在安卓机上会出现渲染精度问题，不能准确的渲染，当然ios没什么问题。

解决办法

主要解决办法是提高精度。
下面我随便举个例子：

1
<div id="main"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#main{
    width: xxxrem;
    height: xxxrem;
    position: relative;
}
#main:after{
    content: '';
    position: absolute;
    background: url('图片路径') no-repeat center;
    /**假设图片宽为.24rem，高为.12rem**/
    width: 24rem;
    height: 24rem;
    background-size: 24rem 12rem;
    transform-origi: 0 0;
    transfrom: scale(0.01);
}

可以看出，提高精度的方法是先扩大100倍之后在进行缩小的变换。

经过上述方法能够解决变形问题。如有更好的方法，以后会作记录。