摘要：但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过毕竟安卓版本众多，还有什么的线等等的坑，都是能完美运行，安卓总得找方法。当使用做单位，出来的圆是不会变形的，可能是安卓在计算过程中产生误差或者有什么其他因素造成的渲染问题。
罪魁祸首
i{
display inline-block
width .08rem
height .08rem
background-color #D0021B
border-radius 50%
}
画了个圆，在ios中效果很理想。但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过ios（毕竟安卓版本众多，还有什么0.5px的线等等的坑，ios都是能完美运行，安卓总得找hack方法）。
当使用px做单位，border-radius 50%出来的圆是不会变形的，可能是安卓在rem计算过程中产生误差或者有什么其他因素造成的渲染问题。
网上有很多的办法，border-radius:9999px;等等，但都没什么软用。
这里我推荐给大家一种方法,能解决这个问题。
i{
display inline-block
width .16rem
height .16rem
background-color #D0021B
border-radius 50%
transform scale(.5)
transform-origin: 0% center
}
就是使用transform scale，先提前把px/rem相关的值放大一倍。然后用transform scale(.5)缩小一倍，也就是我们想要的倍数。然后你就会惊奇的发现渲染出来的图案，贼圆！接着用transform-origin调整下圆的位置就大功告成了！
如果对你有帮助，点赞收藏就是对我最大的鼓励啦！谢谢~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117297.html
摘要：但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过毕竟安卓版本众多，还有什么的线等等的坑，都是能完美运行，安卓总得找方法。当使用做单位，出来的圆是不会变形的，可能是安卓在计算过程中产生误差或者有什么其他因素造成的渲染问题。 罪魁祸首 i{ display inline-block width .08rem height .08r...
摘要：但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过毕竟安卓版本众多，还有什么的线等等的坑，都是能完美运行，安卓总得找方法。当使用做单位，出来的圆是不会变形的，可能是安卓在计算过程中产生误差或者有什么其他因素造成的渲染问题。 罪魁祸首 i{ display inline-block width .08rem height .08r...
摘要：做移动端开发时为了做适配，通常采用作为单位，下面来写一个圆角相同的代码，有的是正圆，有的不是，，均显示正常解决方案单位改为但是这样做无法达到适配的目的设置图片使用既可以适配，即使再小的圆形也能在不同屏幕上完美展示 做移动端开发时为了做适配，通常采用rem作为单位，下面来写一个圆角 .round { width: 0.25rem; height: 0.25rem; ...
摘要：做移动端开发时为了做适配，通常采用作为单位，下面来写一个圆角相同的代码，有的是正圆，有的不是，，均显示正常解决方案单位改为但是这样做无法达到适配的目的设置图片使用既可以适配，即使再小的圆形也能在不同屏幕上完美展示 做移动端开发时为了做适配，通常采用rem作为单位，下面来写一个圆角 .round { width: 0.25rem; height: 0.25rem; ...
摘要：做移动端开发时为了做适配，通常采用作为单位，下面来写一个圆角相同的代码，有的是正圆，有的不是，，均显示正常解决方案单位改为但是这样做无法达到适配的目的设置图片使用既可以适配，即使再小的圆形也能在不同屏幕上完美展示 做移动端开发时为了做适配，通常采用rem作为单位，下面来写一个圆角 .round { width: 0.25rem; height: 0.25rem; ...
阅读 3238·2021-11-25 09:43
阅读 1513·2021-11-16 11:44
阅读 4565·2021-11-12 10:35
阅读 2797·2021-10-08 10:04
阅读 2331·2021-09-22 15:54
阅读 383·2019-08-30 15:55
阅读 766·2019-08-30 15:55
阅读 1805·2019-08-30 15:55
