回答編集履歴
7
a
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQuery
|
|
5
|
+
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQueryに置き換えてください）
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
また、windowのリサイズイベントはかなりの高頻度で発火してしまうため、windowサイズの変更に応じて何らかの処理を実行したい場合は、発生するイベントを間引いてあげます。以下のコードではLodashというライブラリのthrottleメソッドを利用して、発生するイベントを間引いています。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
Lodashを利用するのであれば、jQueryのようにライブラリを読み込んであげる必要がありますので、読み込み方を調べて使ってみてください。
|
|
14
18
|
|
|
15
19
|
|
|
16
20
|
|
6
a
test
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
window幅の変更に応じて何らかの処理を行いたい場合は、windowサイズの変更をwindow.resizeイベントを監視する必要があります。
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
|
|
13
|
+
また、windowのリサイズイベントはかなりの高頻度で発火してしまうため、windowサイズの変更に応じて何らかの処理を実行したい場合は、発生するイベントを間引いてあげます。以下のコードではLodashというライブラリのthrottleメソッドを利用して、発生するイベントを間引いています。
|
|
12
14
|
|
|
13
15
|
|
|
14
16
|
|
5
a
test
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
```JavaScript
|
|
48
48
|
|
|
49
|
-
var
|
|
49
|
+
var container = document.getElementById('container');
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
|
@@ -64,11 +64,11 @@
|
|
|
64
64
|
|
|
65
65
|
if (windowOuterWidth >= 767) {
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
container.className = 'big';
|
|
68
68
|
|
|
69
69
|
} else {
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
container.className = 'small';
|
|
72
72
|
|
|
73
73
|
}
|
|
74
74
|
|
4
a
test
CHANGED
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。
|
|
5
|
+
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQueryの置き換えてください）
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
window幅の変更に応じて何らかの処理を行いたい場合は、windowサイズの変更をwindow.resizeイベントを監視する必要があります。
|
|
6
10
|
|
|
7
11
|
|
|
8
12
|
|
3
a
test
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
> ある横幅のサイズウインドウになったらcssのスタイルを変更したいな
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
1
11
|
```HTML
|
|
2
12
|
|
|
3
13
|
<div id='container' class='small'>Hello World</div>
|
2
a
test
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
window.addEventListener('resize', _.
|
|
67
|
+
window.addEventListener('resize', _.throttle(handleWindowResize, 100));
|
|
68
68
|
|
|
69
69
|
```
|
|
70
70
|
|
|
@@ -77,3 +77,5 @@
|
|
|
77
77
|
[jQuery - resize()](https://api.jquery.com/resize/)
|
|
78
78
|
|
|
79
79
|
[Lodash](https://lodash.com/)
|
|
80
|
+
|
|
81
|
+
[lodashの_.throttleと_.debounceの使用例 - Qiita](https://qiita.com/akifo/items/4d715929934a458fb189)
|
1
a
test
CHANGED
|
@@ -67,3 +67,13 @@
|
|
|
67
67
|
window.addEventListener('resize', _.debounce(handleWindowResize, 100));
|
|
68
68
|
|
|
69
69
|
```
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
# 参考
|
|
74
|
+
|
|
75
|
+
[resize](https://developer.mozilla.org/en-US/docs/Web/Events/resize)
|
|
76
|
+
|
|
77
|
+
[jQuery - resize()](https://api.jquery.com/resize/)
|
|
78
|
+
|
|
79
|
+
[Lodash](https://lodash.com/)
|