質問編集履歴
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
if (window.matchMedia('(max-width:640px)').matches) {
|
|
17
17
|
}
|
|
18
18
|
全ての処理に対し、下記linkタグと同様リアルタイムで変化させる処理をするにはどうしたらいいでしょうか
|
|
19
|
-
イベントリスナ resizeで処理をしていくというのは、かなり面倒です
|
|
19
|
+
イベントリスナ resizeで処理をしていくというのは、上記のようなパターンが100個あったり、複雑な処理だった場合にはかなり面倒です
|
|
20
|
+
一括でリアルタイム性を持たせ、処理する場合どのような手法が考えられますか
|
|
20
21
|
|
|
21
22
|
```ここに言語を入力
|
|
22
23
|
<link rel="stylesheet" media="(min-width: 640px)" href="pc.css">
|
2
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
下記linkタグはリアルタイムにブラウザ幅の変化に伴い対応します
|
|
2
2
|
ブラウザをリサイズするとpc.cssが適応されたりsmartphone.cssがウインドウ幅によって自動で切り替わり適用されます 非常に便利です
|
|
3
3
|
これをJavaScriptで
|
|
4
|
+
div=document.createElement("div");
|
|
5
|
+
div.id="a";
|
|
6
|
+
div.style.width="300px";
|
|
7
|
+
div.style.height="300px";
|
|
8
|
+
document.body.appendChild(div);
|
|
4
9
|
if (window.matchMedia('(max-width:640px)').matches) {
|
|
5
|
-
|
|
10
|
+
a.style.background="red";
|
|
6
11
|
}else{
|
|
7
12
|
alert("pc");
|
|
8
13
|
}
|
|
9
|
-
のようにしてもリアルタイムな変化は行いません
|
|
14
|
+
のようにしてもブラウザの幅を変えたリアルタイムな変化は行いません
|
|
10
15
|
ページ内に記述した
|
|
11
16
|
if (window.matchMedia('(max-width:640px)').matches) {
|
|
12
|
-
alert("smartphone");
|
|
13
|
-
}else{
|
|
14
|
-
alert("pc");
|
|
15
17
|
}
|
|
16
18
|
全ての処理に対し、下記linkタグと同様リアルタイムで変化させる処理をするにはどうしたらいいでしょうか
|
|
17
19
|
イベントリスナ resizeで処理をしていくというのは、かなり面倒です
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
下記タグはリアルタイムにブラウザ幅の変化に伴い対応します
|
|
1
|
+
下記linkタグはリアルタイムにブラウザ幅の変化に伴い対応します
|
|
2
2
|
ブラウザをリサイズするとpc.cssが適応されたりsmartphone.cssがウインドウ幅によって自動で切り替わり適用されます 非常に便利です
|
|
3
3
|
これをJavaScriptで
|
|
4
4
|
if (window.matchMedia('(max-width:640px)').matches) {
|