亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

tunny / 1062人閱讀

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

起因

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

有哪些方案？

【百分比 background-position】

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

【提高數(shù)值精度】

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

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

怎么做？ 思路

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

縮小尺寸可以使用 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; /* 不從中心點(diǎn)縮放 */
    transform: scale(0.01); /* 縮放回原尺寸 */
}
一些別的研究

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

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

據(jù)說縮放 100 倍，在移動頁面上會導(dǎo)致嚴(yán)重性能問題，但博主暫時沒試出來..

參考文檔

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

github庫

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111814.html

相關(guān)文章

  • 移動前端 - 收藏集 - 掘金

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

    Jochen 評論0 收藏0

  • css - 收藏集 - 掘金

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

    phpmatt 評論0 收藏0

  • 構(gòu)建自適應(yīng)的手機(jī)頁面

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

    itvincent 評論0 收藏0

  • 移動端web app自適應(yīng)布局探索與總結(jié)

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

    Benedict Evans 評論0 收藏0

  • 移動端web app自適應(yīng)布局探索與總結(jié)

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

    wangjuntytl 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<