スマートフォンの横表示には対応していません

Laboratory

なないろ研究所

⼈と⼈をつなぐコミュニケーションをもっと世の中に。
それが私達が⾏うこと。

なないろ研究所では日々、様々なことをリサーチし、実験しています。

コミュニケーションの流通をお手伝いするために、日々様々なリサーチを行い、分析し、時に実験しております。

そんな日々の活動内容においてログをつけております。

このような情報共有が、我々が考えるコミュニケーションの一つの形です。

【HTML・CSS】文字サイズを可変にする

こんにちは、なないろフロントエンドプログラマーの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」を使わないと意味が無くなってしまいます。

私達は京都でNo1のデザイン力・UI力を目指す

システム開発・Web開発カンパニー

株式会社なないろです。

各種CMS、企業サイト、キャンペーンサイト、顧客管理システム、IoTシステムなど幅広いITソリューションを優良なデザインとUIで、SEOソリューションをあわせてお客様の目標達成を行う企業です。