在安卓手機中rem單位border-radius:50%畫圓變形的解決方案

elarity 發布于2019-08-23 14:54 / 968人閱讀

摘要：但是在安卓手機中會有變形的情況存在，渲染方面確實安卓手機干不過畢竟安卓版本眾多，還有什么的線等等的坑，都是能完美運行，安卓總得找方法。當使用做單位，出來的圓是不會變形的，可能是安卓在計算過程中產生誤差或者有什么其他因素造成的渲染問題。

罪魁禍首

  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調整下圓的位置就大功告成了！
如果對你有幫助，點贊收藏就是對我最大的鼓勵啦！謝謝~~

云服務器 GPU云服務器應用的是rem單位 rem單位最早的安卓手機最好的安卓手機

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101312.html

在安卓手機中rem單位border-radius:50%畫圓變形的解決方案

摘要：但是在安卓手機中會有變形的情況存在，渲染方面確實安卓手機干不過畢竟安卓版本眾多，還有什么的線等等的坑，都是能完美運行，安卓總得找方法。當使用做單位，出來的圓是不會變形的，可能是安卓在計算過程中產生誤差或者有什么其他因素造成的渲染問題。罪魁禍首 i{ display inline-block width .08rem height .08r...

RiverLi 2019-08-30 15:55 評論0 收藏0
border-radius:50%，在安卓上存在兼容問題

摘要：做移動端開發時為了做適配，通常采用作為單位，下面來寫一個圓角相同的代碼，有的是正圓，有的不是，，均顯示正常解決方案單位改為但是這樣做無法達到適配的目的設置圖片使用既可以適配，即使再小的圓形也能在不同屏幕上完美展示做移動端開發時為了做適配，通常采用rem作為單位，下面來寫一個圓角 .round { width: 0.25rem; height: 0.25rem; ...

darkbug 2019-08-02 16:12 評論0 收藏0
border-radius:50%，在安卓上存在兼容問題

摘要：做移動端開發時為了做適配，通常采用作為單位，下面來寫一個圓角相同的代碼，有的是正圓，有的不是，，均顯示正常解決方案單位改為但是這樣做無法達到適配的目的設置圖片使用既可以適配，即使再小的圓形也能在不同屏幕上完美展示做移動端開發時為了做適配，通常采用rem作為單位，下面來寫一個圓角 .round { width: 0.25rem; height: 0.25rem; ...

Joonas 2019-08-29 18:36 評論0 收藏0