こんにちは、なないろフロントエンドプログラマーのTです。

スマートフォンの画面サイズによって文章の改行位置が変わる現象を回避するため、文字サイズを可変にする設定を実装してみようと思います。

文字サイズを可変にする方法

p{
  font-size:3.6vw;
}

このようにfont-sizeの値にvwを使えば文字は可変になります。
しかし、このままだとレスポンシブ対応する場合、パソコン表示とスマートフォン表示の値をすべて変更する必要があります。
それは不便なので使いやすいように実装してみます。

使いやすく実装

html{
  font-size:16px;
}
body{
  font-size:1rem
}
@media screen and (max-width:480px){
  html{
    font-size:3.6vw;
  }
}


p{
  font-size:1rem;
}

このようにするとhtmlタグのフォントサイズを変更するだけでパソコンとスマートフォンの値を分けることができ、タブレットも切り分ける場合メディアクエリを追加するだけで可能です。

サイズを変更するには「0.9rem」や「1.5rem」などとします。

なお、この場合htmlタグ以外のfont-sizeの値はすべて「rem」を使わないと意味が無くなってしまいます。