モバイル 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
{{#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}}
どうですか?完璧な解決策:)
(終了)