以下に示すように、グリッドを「描画」するページがあります。
これは、絶対配置の div を使用して行います。各グリッドの幅は 237x237 ピクセルであるため、最初のグリッドはtop:0;に配置されます。左：0; 、2 番目のグリッドはtop:0 に配置されます。左:237px; 、3 番目のグリッドはtop:0 に配置されます。左:474px; 等々。
ただし、ユーザーが (ブラウザのキーCtrl+/を使用してCtrl-) ズームインまたはズームアウトすると、ボックスが正しく配置されません。これは、ページの背景色が透けて見える場合に明らかです。
ブラウザのズーム率に関係なく、ボックスを「横に並べる」最良の方法は何ですか?
PS ボックスは動的に移動する必要があるため、絶対に配置する必要がありました。
異なるブラウザーは、異なる方法で「ピクセルの %」を丸めます - CSS を使用した子要素の均等に分散された高さを参照してください
コメントで提案されているように、背景画像を使用すると非常に役立ちます.4つの「正方形」またはグリッドで構成され、水平方向と垂直方向に繰り返される必要があります.
そのようにして、div を保持しposition: absolute、背景を透明のままにすることもできます。ただし、アニメーション中にタイルの背景を表示する必要がある場合は、アニメーションの開始時に背景色として設定してから設定する必要があります。アニメーションが終了すると透明に戻りますが、これが機能するためには、別の灰色の正方形の代わりに灰色の正方形を移動し、白い正方形についても同じであると想定しています。
あなたのコメントに続いて編集してください：
これを実現するのは非常に困難です。ブラウザによって提供されるズームのレベルが異なり、すべての場合に適切に (「ハーフ ピクセル」なしで) 縮小される div のサイズを把握するのは非常に困難です。ただし、機能に影響がない限り、ズームイン/ズームアウト時のルック アンド フィールの多少の不一致は通常非常に許容されます。そうなることを願っています!
最後のアイデアとして、ピクセルの代わりに % ポジショニングを使用してみることができます - これはズーム時にうまく適応する可能性がありますが、テストしていないため保証できません - しかし、試してみる価値があるかもしれません! これで頑張ってください！