モバイルデバイス上のぼやけた小さなアイコンの問題を解決する方法

序文

以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さなアイコンが使用されていました。この小さなアイコンを表示するために背景画像を使用しました。

.del .icon{ 表示: インラインブロック; 幅: 20px; 高さ: 25px; 右余白: 5px; 
垂直位置合わせ: 中央; 背景: url("imgs/delete.png") 繰り返しなし 中央; 背景サイズ: 100%;}

delete.png アイコンの実際のサイズは 20 ピクセルで、PC 上では正常に表示されます。

しかし、それを携帯電話に置いたら、おっと！アイコンがぼやけているのはなぜですか? ！

画像が十分に鮮明ではないので、アイコンをもっと大きくして、サイズを 2 倍にして 40 ピクセルにしてください。

何？まだ少しぼやけていますか?

じゃあもう少し大きくして…疲れた？もっと良い解決策はないでしょうか?答えはもちろんイエスです！

ベクター画像を使用して配置します。つまり、SVG が役立ちます。

もちろん、この記事では SVG の具体的な構文については詳しく説明しません。ここでは、上記の例で PNG ビットマップを SVG ベクター画像に直接変換する方法を簡単に説明します。

1.クリックしてIcoMoonに入り、キーワードdeleteを検索します。

2. 削除アイコンを選択します

3. 左下のボタンをクリックして新しいページに切り替えます

4. この時点で、アイコンの下の「コードを取得」というテキストをクリックすると、ダイアログボックスがポップアップ表示されます。

ダイアログボックス

5. まず、シンボル定義コードを取り出して、本文の最前面の div に配置し、div を非表示に設定します。次に、HTML 部分 (SVG) を取り出して、元の PNG アイコンを置き換えます。最後に、CSS 部分 (サイズなど、必要に応じて若干の変更を加える) を取り出して、スタイルシートに配置します。

<!--HTML セクション-->
<本文>
    <div style="display: none;">
        <!-- オンデマンドで使用できる SVG ライブラリとして -->
        <svg>
            <シンボル id="アイコンビン" ビューボックス="0 0 32 32">
                <title>ビン</title>
                <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
                <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
            </シンボル>
        </svg>
    </div>
    <div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-bin"></use></svg><!--必要に応じてアイコン ID に応じてここを呼び出します--><span>削除</span></div>
</本文>

/*CSS部分*/
.del{ フォントサイズ: 20px;}
.del .icon{ 表示: インラインブロック; 幅: 20px; 高さ: 25px; 右余白: 5px; 垂直位置揃え: 中央; 塗りつぶし: 現在の色;}
.del span{ 垂直位置揃え: 中央;}

上記ではCSSの部分については説明しませんので、ここではHTMLの部分について簡単に説明します。

上記の SVG の隠れた部分は、SVG ライブラリと見なすことができます。ページに必要なすべての SVG アイコンをその中に配置できます。各シンボルは SVG アイコンを表し、アイコンを使用する必要がある場所で xlink:href を介して ID に従って呼び出します。専門用語は SVG スプライトで、CSS スプライトよりもはるかに便利です。最も重要なことは、それがベクター画像であり、ズームインまたはズームアウトしても歪まないことです。

例を挙げてみましょう~~

上記のアイコンを「×」に変更する必要があるが、以前のアイコンをバックアップとして保持したい場合はどうすればよいですか?

とても簡単です。次のように、「SVG ライブラリ」に「×」の SVG コードを追加するだけです。

<div style="display: none;">
    <!-- オンデマンドで使用できる SVG ライブラリとして -->
    <svg>
        <シンボル id="アイコンビン" ビューボックス="0 0 32 32">
            <title>ビン</title>
            <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
            <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
        </シンボル>
        <!--新しいアイコンを追加-->
        <シンボル id="アイコンクロス" viewBox="0 0 32 32">
            <title>十字架</title>
            <PATH D = "M31.708 25.708C-0-0-0-0-0L-9.708-9.708 9.708-9.708C0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 86-4.586C-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0L-9.708 104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229L-4.586 4.586C-0.286 0.286-0.361 0.702-0.229 1.057 0.220.229 1.057 0.220.229 1.057 0.22 0.057 0.220.229 0.22 0.049 0.22 0.2249024 0.2249 0.220 0.25 0.2249 0.220.220 0.25 0 0 0 0 0L9.708 9.708-9.708 9.708C-0 0-0 0-0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.3555-0.057 0.771 0.229 1.057L4.586 4.586 0.586 0.586 0.586 0.586 0.586 0.586 0.586 0.586 0.58 229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0L9.708-9.708 9.708 9.708C0 0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.771 0.771 0.771 0.771 0.771 0.771.057 586C0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357Z "> </path>
        </シンボル>
    </svg>
</div>
<div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-cross"><!--ここで ID 名が変更されていることに注意してください--></use></svg><span>削除</span></div>

するとこのようになり、置換は成功です！