HTML JavaScript メディアクエリ リアルタイム

Question

下記linkタグはリアルタイムにブラウザ幅の変化に伴い対応します
ブラウザをリサイズするとpc.cssが適応されたりsmartphone.cssがウインドウ幅によって自動で切り替わり適用されます 非常に便利です
これをJavaScriptで
div=document.createElement("div");
div.id="a";
div.style.width="300px";
div.style.height="300px";
document.body.appendChild(div);
if (window.matchMedia('(max-width:640px)').matches) {
a.style.background="red";
}else{
alert("pc");
}
のようにしてもブラウザの幅を変えたリアルタイムな変化は行いません
ページ内に記述した
if (window.matchMedia('(max-width:640px)').matches) {
}
全ての処理に対し、下記linkタグと同様リアルタイムで変化させる処理をするにはどうしたらいいでしょうか
イベントリスナ resizeで処理をしていくというのは、上記のようなパターンが100個あったり、複雑な処理だった場合にはかなり面倒です
一括でリアルタイム性を持たせ、処理する場合どのような手法が考えられますか

<link rel="stylesheet" media="(min-width: 640px)" href="pc.css">
<link rel="stylesheet" media="(max-width: 640px)" href="smartphone.css">

Comments

[maisumakun]

> 全ての処理に対し、下記linkタグと同様リアルタイムで変化させる処理をするにはどうしたらいいでしょうか

なぜそれを「JavaScriptで」行わなければならないのでしょうか？

[退会済みユーザー]

style.backgroundを例としましたが、valueだったりJavaScriptを使わなと変更できない場合どうするんですか？
画面幅に合わせてリアルタイムにvalueを変えたり

input=document.createElement("input");
input.type="button";
input.value="0";
input.id="a";
input.style.width="300px";
input.style.height="300px";
document.body.appendChild(input);
if (window.matchMedia('(max-width:640px)').matches) {
a.value="1";
}else{
alert("pc");
}

[Zuishin]

https://teratail.com/questions/357682

> Zuishinの大便が臭いと思う方は低評価下さい
> よろしくお願いいたします！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

消えないところにメモっとかないとうっかり回答したくないからな。
↓と同じ中身

https://teratail.com/users/vafa

Answer 1

valueだったりJavaScriptを使わなと変更できない場合どうするんですか？

イベントリスナ resizeで処理をしていくというのは、上記のようなパターンが100個あったり、複雑な処理だった場合にはかなり面倒です

実際に複雑な制御を必要とする状況のようですし、それをやるしかないでしょう。

Answer 2

スタイルシート自体に@mediaを書けないのでしょうか？

@media (max-width: 800px) {
  body{background-Color:blue;}
}
@media screen and (min-width: 801px)  {
  body{background-Color:red;}
}

リサイズでリアルタイムに背景色が変わります

Comments

[退会済みユーザー]

style.backgroundを例としましたが、valueだったりJavaScriptを使わなと変更できない場合どうするんですか？
画面幅に合わせてリアルタイムにvalueを変えたり

input=document.createElement("input");
input.type="button";
input.value="0";
input.id="a";
input.style.width="300px";
input.style.height="300px";
document.body.appendChild(input);
if (window.matchMedia('(max-width:640px)').matches) {
a.value="1";
}else{
alert("pc");
}