成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

tunny / 1019人閱讀

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

起因

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

有哪些方案？

【百分比 background-position】

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

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

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

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

怎么做？ 思路

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

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

小障礙

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

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

編寫代碼

最后寫下以下代碼

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

.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); /* 縮放回原尺寸 */
}
一些別的研究

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

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

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

參考文檔

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

github庫

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111814.html

相關(guān)文章

  • 移動(dòng)前端 - 收藏集 - 掘金

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

    Jochen 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

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

    phpmatt 評(píng)論0 收藏0

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

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

    itvincent 評(píng)論0 收藏0

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

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

    Benedict Evans 評(píng)論0 收藏0

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

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

    wangjuntytl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<