JavaScriptを使用してブラウザが従うCSSメディアクエリを制御する方法はありますか?
たとえば、次の css があるとします。
p { color : red; }
@media (max-width: 320px) {
p { color: blue; }
}
@media (max-width: 480px) {
p { color: green; }
}
幅が 480px を超えるデスクトップ ブラウザでページを開くと、赤い段落が表示されます。ブラウザが 320px メディア クエリに従うように JavaScript 関数を呼び出したいと思います。たとえば、以下の関数を呼び出して、段落を青色にします。
setMediaQuery('320px')
これの使用例は、ユーザーがブラウザー ウィンドウのサイズを変更することなく、全幅のデスクトップを維持し、さまざまなメディア クエリをテストできるようにする CMS です。
iframe なしでこの問題を解決するためのアイデアはありますか? すべての css を js にロードし、そこでスタイルを操作することを考えましたが、オプションは法外に複雑に思えます。