ベストプラクティス |ディヴマジック

DivMagic を最大限に活用するためのヒントとコツ

1. モバイルファーストで仕事をする

テイルウィンドに似ている, 最初にモバイル デバイスをターゲットにしてから、大きな画面用のスタイルを追加します。 これにより、スタイルのコピーと変換をより迅速かつ簡単に行うことができます。

DivMagic は、ブラウザに表示されるとおりに要素を変換します。大きな画面を使用している場合、コピーされるスタイルは大きな画面用であり、その画面サイズに応じたマージン、パディング、その他のスタイルが含まれます。

大きな画面用にスタイルをコピーするのではなく、ブラウザのサイズを小さくして、その画面サイズ用にスタイルをコピーします。次に、大きな画面用のスタイルを追加します。

2.背景に注意を払う

要素をコピーすると、DivMagic は背景色をコピーします。ただし、要素の背景色が親要素から取得される可能性があります。

要素をコピーしても背景色がコピーされない場合は、親要素の背景色を確認してください。

3. grid 要素に注目する

DivMagic は、ブラウザに表示されているとおりに要素をコピーします。 grid 要素には、ビュー サイズに依存する多くのスタイルがあります。

grid 要素をコピーしても、コピーされたコードが正しく表示されない場合は、grid スタイルを flex に変更してみてください。

ほとんどの場合、grid スタイルを flex に変更し、いくつかのスタイル (例: flex-row、flex-col) を追加すると、同じ結果が得られます。