資訊專欄INFORMATION COLUMN
摘要：但是在安卓手機(jī)中會(huì)有變形的情況存在，渲染方面確實(shí)安卓手機(jī)干不過畢竟安卓版本眾多，還有什么的線等等的坑，都是能完美運(yùn)行，安卓總得找方法。當(dāng)使用做單位，出來的圓是不會(huì)變形的，可能是安卓在計(jì)算過程中產(chǎn)生誤差或者有什么其他因素造成的渲染問題。
罪魁禍?zhǔn)?/b>
i{
display inline-block
width .08rem
height .08rem
background-color #D0021B
border-radius 50%
}
畫了個(gè)圓，在ios中效果很理想。但是在安卓手機(jī)中會(huì)有變形的情況存在，渲染方面確實(shí)安卓手機(jī)干不過ios（畢竟安卓版本眾多，還有什么0.5px的線等等的坑，ios都是能完美運(yùn)行，安卓總得找hack方法）。
當(dāng)使用px做單位，border-radius 50%出來的圓是不會(huì)變形的，可能是安卓在rem計(jì)算過程中產(chǎn)生誤差或者有什么其他因素造成的渲染問題。
網(wǎng)上有很多的辦法，border-radius:9999px;等等，但都沒什么軟用。
這里我推薦給大家一種方法,能解決這個(gè)問題。
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相關(guān)的值放大一倍。然后用transform scale(.5)縮小一倍，也就是我們想要的倍數(shù)。然后你就會(huì)驚奇的發(fā)現(xiàn)渲染出來的圖案，賊圓！接著用transform-origin調(diào)整下圓的位置就大功告成了！
如果對你有幫助，點(diǎn)贊收藏就是對我最大的鼓勵(lì)啦！謝謝~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101312.html
摘要：但是在安卓手機(jī)中會(huì)有變形的情況存在，渲染方面確實(shí)安卓手機(jī)干不過畢竟安卓版本眾多，還有什么的線等等的坑，都是能完美運(yùn)行，安卓總得找方法。當(dāng)使用做單位，出來的圓是不會(huì)變形的，可能是安卓在計(jì)算過程中產(chǎn)生誤差或者有什么其他因素造成的渲染問題。 罪魁禍?zhǔn)? i{ display inline-block width .08rem height .08r...
摘要：做移動(dòng)端開發(fā)時(shí)為了做適配，通常采用作為單位，下面來寫一個(gè)圓角相同的代碼，有的是正圓，有的不是，，均顯示正常解決方案單位改為但是這樣做無法達(dá)到適配的目的設(shè)置圖片使用既可以適配，即使再小的圓形也能在不同屏幕上完美展示 做移動(dòng)端開發(fā)時(shí)為了做適配，通常采用rem作為單位，下面來寫一個(gè)圓角 .round { width: 0.25rem; height: 0.25rem; ...
摘要：做移動(dòng)端開發(fā)時(shí)為了做適配，通常采用作為單位，下面來寫一個(gè)圓角相同的代碼，有的是正圓，有的不是，，均顯示正常解決方案單位改為但是這樣做無法達(dá)到適配的目的設(shè)置圖片使用既可以適配，即使再小的圓形也能在不同屏幕上完美展示 做移動(dòng)端開發(fā)時(shí)為了做適配，通常采用rem作為單位，下面來寫一個(gè)圓角 .round { width: 0.25rem; height: 0.25rem; ...
閱讀 609·2021-10-08 10:20
閱讀 1496·2021-09-23 11:22
閱讀 3226·2019-08-30 15:55
閱讀 1612·2019-08-28 18:25
閱讀 1870·2019-08-28 18:14
閱讀 1243·2019-08-26 11:37
閱讀 2906·2019-08-26 10:18
閱讀 2430·2019-08-23 18:39
