モバイル端末でレム単位を使用する場合の CSS スプライトの位置ずれの問題を完全に解決_html/css_WEB-ITnose

モバイル Web 開発は強力な rem サポートと切り離せませんが、各サイズの基底が必ずしも比例しているわけではなく、ブラウザーの計算誤差により、背景の位置が十分に正確でないことがよくあり、CSS スプライトの位置がずれる原因となります。下の写真の左側は PC 側のシミュレーション ページ、右側はモバイル側での実測値です。

右側のアイコンがずれていることがはっきりとわかります。問題が発生しています。画像の場合はiconfontを使えば解決できますが、モノクロアイコンに限定されます。応答性を高め、rem によって引き起こされる問題を回避する必要があります。パーセンテージを使用するのが良い解決策です。

でも...待って、なぜまだ位置がずれているのでしょうか?あるいは、必要な場所をまったく見つけることができない場合もありますか?背景位置がパーセンテージ単位である場合、その計算方法は非常に特殊であることがわかりました。これは、「背景位置の単位属性値を追跡する」の Lin Xiaozhi からの引用です。がこの値の 14% 84% である場合、画像の 14% 84% の座標点がコンテナの 14% 84% の位置に配置されます。このように理解すると、background-positionの属性値としてパーセントを使用すると、コンテナの中心点を基準に背景画像が随時変化するということになります。

これで問題は解決され、次の式を整理できます:

n%*W - n%*w = -xn%*H - n%*h = -y

ここで、W/H はスプライト画像全体の幅と高さ、w/h は 1 つのアイコンのサイズ、x/y はは従来のピクセル座標です。 gulp.spritesmith + Sass に基づいて、次のテンプレートを使用します:

{{#extend "scss"}}{{#content "sprites"}}{{#each sprites}}@mixin {{prefix}}-{{name}} {    background-position: 0 {{offset_y}}/({{height}}-{{total_height}})*100%;}{{/each}}{{/content}}{{#content "spritesheet"}}.{{spritesheet.name}} {    background-image: url('{{{spritesheet.escaped_image}}}');    background-repeat: no-repeat;    background-size: px({{spritesheet.width}}) px({{spritesheet.height}});}{{/content}}{{/extend}}

ここで、px(*) は px を rem に変換する関数であり、{{prefix}} などの変数は gulpfile.js で設定できます。 @mixinを使用する理由は、CSS3アニメーションでは@includeは使用できるが、@extendは使用できないためです。同時に、冗長なスタイルを避けるために、要素と疑似要素の混合使用も考慮されます。

どうですか？完璧な解決策:)

(終了)