页面上一些小icon的制作方法及技术选择
我們經(jīng)常切片的時(shí)候，看到一些小圖標(biāo),都有些心頭小煩。當(dāng)然我們一般為了兼容多款瀏覽器。選擇保守的切圖拼成雪碧圖。然后通過background-position去定位到你想要用的圖標(biāo).
隨著我們一步步摒棄兼容性差的瀏覽器。我們也可以通過不同的技術(shù)手段去實(shí)現(xiàn)小圖標(biāo)。接下來。我將總結(jié)我曾用過的各種方法。實(shí)現(xiàn)頁面小圖標(biāo)的方法
1. 切下小圖標(biāo)然后拼成位置合理的雪碧圖；
通過background-position樣式來定位到你想要用的方法。這是最常用的方法；
劣勢：當(dāng)初在wap版運(yùn)用該方法時(shí)遇到了問題。每個(gè)小圖標(biāo)呈現(xiàn)在頁面上總是有部分其他圖標(biāo)卡在頁面上。如下圖
這是chrome瀏覽器開發(fā)工具所呈現(xiàn)的效果，不細(xì)看是看不出來的。 但只在iphone4下觀看，會(huì)發(fā)現(xiàn)圖標(biāo)嚴(yán)重沒對(duì)齊。
思考方向：我認(rèn)真排查html及css的問題。最后我自己重新寫demo,運(yùn)用淘寶的移動(dòng)端運(yùn)用的技術(shù)flexible.js，得到解決。
總結(jié)：之所以造成這種原因，是因?yàn)槲覀兊捻撁婺０逯性O(shè)置根字體的大小精度不夠，對(duì)于緊湊的背景圖定位就會(huì)放大這個(gè)問題。
當(dāng)然臨時(shí)解決方案，就暫時(shí)就所有小圖標(biāo)拆開來引用。
優(yōu)勢：這種背景圖定位方法，在web端運(yùn)用是非常好的。頁面加載，只需要下載一張背景圖片就好。對(duì)優(yōu)化頁面加載性能是很好的。
?
2. 通過html+css實(shí)現(xiàn)一些圖標(biāo)
?
當(dāng)我們拿到如下圖的設(shè)計(jì)稿：
對(duì)于右邊的大于符號(hào)圖標(biāo),我們真心懶得切圖。當(dāng)然我們的確可以通過 html+css來實(shí)現(xiàn)
html: <span>></span>css: span{font-size:20px;font-family: "宋體"； }實(shí)現(xiàn)效果還是挺好的：
分析： 這種方案在web端是可實(shí)現(xiàn)的，但是移動(dòng)端是無法實(shí)現(xiàn)，手機(jī)版本太多了，瀏覽器種類也太多。估計(jì)每款手機(jī)都不太能渲染出我們要的宋體。
總結(jié)：根據(jù)自身項(xiàng)目的開發(fā)平臺(tái)和需求，我們可以選擇這種方法制作圖標(biāo)
3.css3屬性實(shí)現(xiàn)
我們依舊參照上圖設(shè)計(jì)稿制作出一個(gè)箭頭
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>narrow</title> </head> <style>div{width: 50px;height: 50px;border:1px solid #fff;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotateZ(-45deg);margin-top:50px;} </style> <body><div></div> </body> </html>實(shí)現(xiàn)效果：
總結(jié)： 一看就知道。ie8及以下瀏覽器是不能支持css3屬性的。 這個(gè)運(yùn)用還是要看需求方對(duì)瀏覽器的要求了
?
4. 插入特殊字符實(shí)現(xiàn)圖標(biāo)
還是參照以上的設(shè)計(jì)稿--制作箭頭
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>narrow</title> </head> <style>body{background: pink}div.narrow{width: 50px;height: 50px;border:1px solid transparent;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotateZ(-45deg);margin-top:50px;}.box{position: relative;width:200px;height: 200px;}.box div{font-size:100px;position: absolute;left:0;top:0;}.box div.black{left:2px;top:0;z-index: 8}.box div.white{z-index: 9} </style> <body><div class="narrow"></div><div class="box"><div class="white">◆</div><div class="black">◇</div></div> </body> </html>實(shí)現(xiàn)效果：
圖上標(biāo)題4就是通過特殊字符實(shí)現(xiàn)的。
總結(jié)：一直覺得 前端工作相比后端開發(fā)，總是多了很多想象力。每個(gè)人寫出來的頁面總是有自己的特色。可能這就是我為什么成為前端工程師并一直堅(jiān)持下去的魅力所在吧
5.icon-font實(shí)現(xiàn)頁面圖標(biāo)，不用加載一張圖片。
待續(xù)：....................
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaoxingyiyi/p/5458204.html
總結(jié)
以上是生活随笔為你收集整理的页面上一些小icon的制作方法及技术选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求高精度幂(java)
- 下一篇： lnmp 60秒的服务器缓存时间