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