回答編集履歴
1
説明不足だったので修正
test
CHANGED
|
@@ -4,11 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
※ htmlタグにfont-sizeの指定があると、remでブレイクポイントを指定する場合Safariでブレイクポイントがhtmlにつけたfon-sizeの影響を受けて他のブラウザと切り替わるポイントが変わってしまうので要注意です。
|
|
6
6
|
|
|
7
|
-
bodyで設定したほうが安全かもしれません。
|
|
7
|
+
メディアクエリをremで指定する場合はbodyで設定したほうが安全かもしれません。
|
|
8
|
+
|
|
9
|
+
ただし、この場合コンテンツのフォントサイズはremで指定すると大きさがズレてしましますのでem指定などにしなければならなくなります。
|
|
8
10
|
|
|
9
11
|
参照: [Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい！？](http://chaika.hatenablog.com/entry/2015/04/25/210001)
|
|
10
12
|
|
|
11
13
|
```css
|
|
14
|
+
|
|
15
|
+
/* メディアクエリをrem指定する場合 */
|
|
12
16
|
|
|
13
17
|
body {
|
|
14
18
|
|
|
@@ -19,6 +23,24 @@
|
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
```
|
|
26
|
+
|
|
27
|
+
メディアクエリをpxとかで指定する場合は素直にhtmlタグでフォントサイズを調整してしまい、コンテンツをrem指定にするのがカンタンです
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
|
|
31
|
+
/* メディアクエリをpxなどで指定 */
|
|
32
|
+
|
|
33
|
+
html {
|
|
34
|
+
|
|
35
|
+
font-size: 62.5%;
|
|
36
|
+
|
|
37
|
+
line-height: 1.4;
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
|
|
22
44
|
|
|
23
45
|
##### フォントサイズの指定
|
|
24
46
|
|