css3 は、モバイル ブラウザーでの H5 Web ページのアイコンがぼやける問題を解決するために、スプライトの背景画像圧縮を処理します_html/css_WEB-ITnose

最近、私は WeChat H5 アプリのプロジェクトを担当していましたが、モバイル ブラウザーで Web ページを表示するとアイコンがぼやけてギザギザになるという憂鬱な問題に遭遇しましたが、コンピューターのブラウザーでは正常に表示されました。おそらく解像度の適応などの問題であることはわかっていました。その後、インターネットでいくつかの解決策を検索しましたが、ほとんどの解決策は、1 倍に拡大してから圧縮して表示する一連のアイコンをデザインすることでした。

タグは高解像度の表示効果を得るために幅と高さを固定することで大きな画像を圧縮できることを誰もが知っていますが、これを行うにはどうすればよいでしょうか? CSS3 には、背景画像の幅と高さを直接設定できる非常に優れた属性 background-size があり、前者の疑問を直接解決します。

次に問題が発生します。Web ページの各アイコンを個別の画像とともにロードすることは不可能です。その場合、複数の小さな画像を 1 つの大きな画像に入れるのが一般的なアプローチです。画像を取得し、スプライト (elf) の背景位置配置メソッドによって解決します。大きな画像が読み込まれている限り、複数のアイコンを表示できるため、http リクエストのオーバーヘッドが軽減され、パフォーマンスが向上します。したがって、1 倍に拡大された高解像度のアイコンを 1 つの大きな画像に配置し、対応する各アイコンを背景位置に配置して圧縮したいとも考えています。オンラインで多くの方法を検索した後、最終的に信頼できる解決策を見つけました:

1) まず、2 つの写真を並べて準備する必要があります (並べる必要があります。後述します)。1 つは元のサイズで、もう 1 つは元のサイズです。倍率1倍のサイズ

(map-icon.png)

(map-icon@2x.png)

2) オリジナルの書き込み方法は主にコンピュータのブラウザで表示するためのもので、オリジナルを使用していますmap-icon.png を使用できます

/*  //网页标签：  <a class="control"><span class="car"></span></a>  <a class="control"><span class="position"></span></a>*//* 装载图标的容器，固定宽高，内距设为0 */.control { display: block; text-decoration: none; padding: 0; width: 30px; height: 30px; }/* 图标标签，宽高自动填充 */.car,.position,.zoom-in,.zoom-out {	display: block; 	width: 100%; 	height: 100%; 	background: url(images/map-icon.png) no-repeat;}.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }

3) 問題は、background-size 属性値を何に設定する必要があるかをどうやって知るかということです。 後で私は式を見つけました:

高分辨率图像宽度 / 目标图像宽度 = X原始Sprites图像宽度 / x = background-size的宽度值

さて、ここでは式の原理を拡張するつもりはありませんが、直接書いてみましょう:

60 / 30 = 2 これは倍率です

60x60 の大きな写真 7 枚の合計幅。は 420 です

420 / 2 = 210 これは、背景サイズの幅です

そして、背景サイズの高さですが、ここで自動に設定し、圧縮のために @2x の大きな画像に置き換えることができます

また、外側の層で Media Queries を宣言する必要があります。この Media Queries は特に Retina スクリーン デバイスのディスプレイを対象としています

/* 移动端媒体查询像素比 */@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2) {.car,.position,.zoom-in,.zoom-out {	background: url(images/map-icon@2x.png) no-repeat;        background-size: 210px auto;}/* 注意这里还是按30像素大小的位置来查找 */.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }}

逆に、高さの値も指定でき、幅は自動で指定できるようです-adaptive ですが、試してみましたが、成功するのは簡単ではありません。ここからは、アイコンを並べて背景画像に幅を割り当てるだけです。

最後に、このソリューションの使用前後の効果を示します。

(治療前)

(治療後)