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

tunny 發布于2019-08-29 12:19 / 1009人閱讀

摘要：起因在移動端使用布局時圖片也需要用單位。例如原本提高倍寫成這樣瀏覽器解析就會準確多了。下面提到的辦法就是的方案怎么做思路單位數值變大了，整體也會變得很大，需要縮小回原來的尺寸。本文同時發布在的博客

起因

在移動端使用 rem 布局時 sprite 圖片也需要用 rem 單位。
但由于瀏覽器對小數單位精度解析的差異，在不同設備上一些圖片看起來會缺了一點點，或者多了一點點..

有哪些方案？

【百分比 background-position】

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

【提高數值精度】

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

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

怎么做？ 思路

單位數值變大了，整體也會變得很大，需要縮小回原來的尺寸。

縮小尺寸可以使用 css 的 zoom，或者 transform scale，建議使用后者，原因可以看下最后的【參考文檔】

小障礙

從圖中可以看到，scale 的縮放并不會影響到布局

那么可以借助偽元素讓要縮放的圖片脫離文檔流

編寫代碼

最后寫下以下代碼

.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); /* 縮放回原尺寸 */
}

一些別的研究

相對于維護麻煩的 css sprite，其實還有 Data URI（base64的方式），而且不會遇到文章里想要解決的問題，推薦閱讀【參考文檔】里的資料

在 ~~不遠的將來~~ 人們會逐漸用上 http2，借助多路復用的特性，不做 css sprite 看樣子性能會更好。

據說縮放 100 倍，在移動頁面上會導致嚴重性能問題，但博主暫時沒試出來..

參考文檔

移動端性能大比拼：CSS Sprites vs. Data URI
假如HTTP/2已經普及
zoom和transform:scale()的區別
移動端適配之雪碧圖(sprite)背景圖片定位 (百分比方案)
移動端web app自適應布局探索與總結 (提高數值精度方案)

github庫

https://github.com/think2011/gulp-icons
相關代碼和調試可以看下上面的代碼庫，也歡迎 star 收藏。

本文同時發布在 think2011的博客 2017-03-31 20:07:23

云服務器 GPU云服務器應用的是rem單位類的缺失問題 rem單位解決問題的方法

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

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

移動前端 - 收藏集 - 掘金

摘要：使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面做過網頁開發的同學想必都遇到過這樣尷尬的排版問題：在主體內容不足夠多或者未完全加載出來之前，就會導致出現（圖一）的這種情況，原因是因為...

Jochen 2019-08-29 12:43 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
構建自適應的手機頁面

摘要：從事開發好多年，但是手機頁面開發較晚，所以最開始的時候，為了做微信應用的開發，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成熟的網站，分享出來，歡迎拍磚。從事PC Web開發好多年，但是手機頁面開發較晚，所以最開始的時候，為了做微信應用的開發，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成...

itvincent 2019-08-21 10:30 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

Benedict Evans 2019-08-21 10:44 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

wangjuntytl 2019-08-28 18:21 評論0 收藏0