有效解決 css sprite 圖片使用 rem 單位邊角缺失的問題

時間 2019-11-07

標籤有效解決 css sprite 圖片使用 rem 單位邊角缺失問題欄目 CSS 简体版

原文原文鏈接

原由

在移動端使用 rem 佈局時 sprite 圖片也須要用 rem 單位。
但因爲瀏覽器對小數單位精度解析的差別，在不一樣設備上一些圖片看起來會缺了一點點，或者多了一點點..css

有哪些方案？

【百分比 background-position】html

既然不能寫固定單位，那麼用百分比應該能夠吧？
其實上面的截圖正是用的百分比，網絡上見到大多數也有提到這個方法，但博主的實踐來看，並無效果，或許是哪裏沒作好..

【提升數值精度】git

瀏覽器沒辦法精確的處理小數，那麼提升數值精度就行了吧。
例如本來 `23.12456rem` ,提升 100 倍, 寫成 `2312.456rem` 這樣瀏覽器解析就會準確多了。

下面提到的辦法就是【2】的方案github

怎麼作？

思路

單位數值變大了，總體也會變得很大，須要縮小回原來的尺寸。web
縮小尺寸可使用 css 的 zoom，或者 transform scale，建議使用後者，緣由能夠看下最後的【參考文檔】gulp

小障礙

從圖中能夠看到，scale 的縮放並不會影響到佈局segmentfault
那麼能夠藉助僞元素讓要縮放的圖片脫離文檔流瀏覽器

編寫代碼

最後寫下如下代碼網絡

.icon-my {
    width: 2.13333rem;
    height: 2.13333rem;
    position: relative; /* 相對定位 */
}

.icon-my:after {
    content: '';
    width: 10000%;  /* 放大100倍 */
    height: 10000%;
    position: absolute; 
    left: 0;
    top: 0;
    background: url(icon-index.png) no-repeat -245.33333rem 0; /* 單位尺寸放大100倍 */
    background-size: 593.06667rem 458.66667rem;
    transform-origin: 0 0; /* 不從中心點縮放 */
    transform: scale(0.01); /* 縮放回原尺寸 */
}