頁面上一些小icon的製做方法及技術選擇

時間 2019-11-16

標籤頁面上一些小 icon 製做方法技術選擇简体版

原文原文鏈接

咱們常常切片的時候，看到一些小圖標,都有些心頭小煩。固然咱們通常爲了兼容多款瀏覽器。選擇保守的切圖拼成雪碧圖。而後經過background-position去定位到你想要用的圖標.css

隨着咱們一步步摒棄兼容性差的瀏覽器。咱們也能夠經過不一樣的技術手段去實現小圖標。接下來。我將總結我曾用過的各類方法。實現頁面小圖標的方法html

1. 切下小圖標而後拼成位置合理的雪碧圖；前端

經過background-position樣式來定位到你想要用的方法。這是最經常使用的方法；css3

劣勢：當初在wap版運用該方法時遇到了問題。每一個小圖標呈如今頁面上老是有部分其餘圖標卡在頁面上。以下圖web

這是chrome瀏覽器開發工具所呈現的效果，不細看是看不出來的。但只在iphone4下觀看，會發現圖標嚴重沒對齊。chrome

思考方向：我認真排查html及css的問題。最後我本身從新寫demo,運用淘寶的移動端運用的技術flexible.js，獲得解決。後端

總結：之因此形成這種緣由，是由於咱們的頁面模板中設置根字體的大小精度不夠，對於緊湊的背景圖定位就會放大這個問題。瀏覽器

固然臨時解決方案，就暫時就全部小圖標拆開來引用。前端工程師

優點：這種背景圖定位方法，在web端運用是很是好的。頁面加載，只須要下載一張背景圖片就好。對優化頁面加載性能是很好的。iphone

2. 經過html+css實現一些圖標

當咱們拿到以下圖的設計稿：

對於右邊的大於符號圖標,咱們真心懶得切圖。固然咱們的確能夠經過 html+css來實現

html:
<span>></span>

css:
span{
    font-size:20px;
    font-family: "宋體"；      
}

　實現效果仍是挺好的：

分析：這種方案在web端是可實現的，可是移動端是沒法實現，手機版本太多了，瀏覽器種類也太多。估計每款手機都不太能渲染出咱們要的宋體。

總結：根據自身項目的開發平臺和需求，咱們能夠選擇這種方法制做圖標

3.css3屬性實現

咱們依舊參照上圖設計稿製做出一個箭頭

<!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>

實現效果：

總結：一看就知道。ie8及如下瀏覽器是不能支持css3屬性的。這個運用仍是要看需求方對瀏覽器的要求了

4. 插入特殊字符實現圖標

仍是參照以上的設計稿--製做箭頭

<!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>