スマホ用のフォントサイズをCSSで切り替えるには

deviceのサイズによってcssを切り替えるようにしました。

@media all and (max-width: 720px) {
スマホ用CSS
}

おそらくこれは切り替えるというより、deviceサイズが変わった時にCSSを追加しているのだと思います。

なぜかというとスマホ用CSSでfont-sizeを変えた場合に、変わりませんでした。
どのようにすればfont-sizeを上書きできるのでしょうか？

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

行動規範の内容に同意します

回答1件

@media all and (max-width: 720px) {
スマホ用CSS
}
おそらくこれは切り替えるというより、deviceサイズが変わった時にCSSを追加しているのだと思います。

正確には「横幅が～720px の場合、カッコ内のスタイルを適用する。」です。
これは、機種（スマホ・タブレット・PC）に関係しません。
PC上でウィンドウサイズを狭めていけば、720px を切った際に、上記スタイルが適用されることになります。

なぜかというとスマホ用CSSでfont-sizeを変えた場合に、変わりませんでした。
どのようにすればfont-sizeを上書きできるのでしょうか？

PC用のCSSセレクタと、スマホ用のCSSセレクタを同じものにして設定してみてください。
そうすれば、720px サイズよりも小さくなった場合、font-size が適用されるはずです。

lang
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta charset="utf-8">
5<style>
6*{
7	margin:0;
8	padding:0;
9}
10body{
11  background-color:#fff;
12  font-size:10px;
13}
14@media all and (max-width: 720px) { 
15body{
16  background-color:#000;
17  font-size:15px;
18  color:#fff;
19}
20}
21</style>
22</style>
23<body>
24フォントサイズチェック。
25</body>
26</html>