実時にページの変化

問題は要件から生じます。プロジェクトが PC とモバイル用に複数のレイアウトに適合する必要があるため、特定の幅でいくつかの要素がずれる現象が発生します。

CSS の場合、メディアクエリを使用してページの幅をリアルタイムで検出し、タグに異なる属性を付与することができます。

@media (max-width:768px){
    ...
}

JavaScript では、以下の方法を使用できます。

window.addEventListener('load', function() {
    window.addEventListener('resize', function() {
        console.log(window.innerWidth)
        var w = window.innerWidth;
        ...
        }
    })
})

具体的な操作の詳細は試してみる価値があります。これは非常に良い方法です。同時に、windowに注意してください。これは例ですが、実際のコーディングでは window イベントを慎重に使用してください。