回答編集履歴
1
説明不足だったので修正
answer
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
大きな会社勤めではないので、自分のやり方になります。
|
|
2
2
|
レスポンシブ対応の場合、PC・スマートフォンどちらとも、`font-size: 62.5%`で1rem = 10px 基準にして設定しています。
|
|
3
3
|
※ htmlタグにfont-sizeの指定があると、remでブレイクポイントを指定する場合Safariでブレイクポイントがhtmlにつけたfon-sizeの影響を受けて他のブラウザと切り替わるポイントが変わってしまうので要注意です。
|
|
4
|
-
bodyで設定したほうが安全かもしれません。
|
|
4
|
+
メディアクエリをremで指定する場合はbodyで設定したほうが安全かもしれません。
|
|
5
|
+
ただし、この場合コンテンツのフォントサイズはremで指定すると大きさがズレてしましますのでem指定などにしなければならなくなります。
|
|
5
6
|
参照: [Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい！？](http://chaika.hatenablog.com/entry/2015/04/25/210001)
|
|
6
7
|
```css
|
|
8
|
+
/* メディアクエリをrem指定する場合 */
|
|
7
9
|
body {
|
|
8
10
|
font-size: 62.5%;
|
|
9
11
|
line-height: 1.4;
|
|
10
12
|
}
|
|
11
13
|
```
|
|
14
|
+
メディアクエリをpxとかで指定する場合は素直にhtmlタグでフォントサイズを調整してしまい、コンテンツをrem指定にするのがカンタンです
|
|
15
|
+
```css
|
|
16
|
+
/* メディアクエリをpxなどで指定 */
|
|
17
|
+
html {
|
|
18
|
+
font-size: 62.5%;
|
|
19
|
+
line-height: 1.4;
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
12
23
|
##### フォントサイズの指定
|
|
13
24
|
レスポンシブ対応の場合 rem に対応していないブラウザがある可能性を考慮してpx指定を一緒にするのが良いかと思います。
|
|
14
25
|
```css
|