美文网首页
手机端用rem或百分比做出的圆不圆的解决办法

手机端用rem或百分比做出的圆不圆的解决办法

作者: 放逐的帝王 | 来源:发表于2018-05-24 15:10 被阅读0次

    因为项目需要以圆为基准做动作,所以不能用px来画圆,只能用rem或百分比,我们用的rem ,如果是数字大一点的数值,画出的圆也没关系挺圆的,但数值一小就发现很多画出的圆,要不椭圆,要不六边形,反正就是不规则:用了各种方法未果;想到一个方法:
    把圆点先扩大十倍,再缩小十倍;

    width: 1rem;
    height: 1rem;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.1);
    -ms-transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    

    扩大是以元素的左上角基准的,缩小是以元素的中心点为基准的,所以我们再缩小时把缩小的基准点有指向左上角,这样就解决了做出的圆不圆而且位置大小也都没有改变,完美。

    相关文章

      网友评论

          本文标题:手机端用rem或百分比做出的圆不圆的解决办法

          本文链接:https://www.haomeiwen.com/subject/uqdsjftx.html