大きな会社勤めではないので、自分のやり方になります。
レスポンシブ対応の場合、PC・スマートフォンどちらとも、font-size: 62.5%
で1rem = 10px 基準にして設定しています。
※ htmlタグにfont-sizeの指定があると、remでブレイクポイントを指定する場合Safariでブレイクポイントがhtmlにつけたfon-sizeの影響を受けて他のブラウザと切り替わるポイントが変わってしまうので要注意です。
メディアクエリをremで指定する場合はbodyで設定したほうが安全かもしれません。
ただし、この場合コンテンツのフォントサイズはremで指定すると大きさがズレてしましますのでem指定などにしなければならなくなります。
参照: Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい!?
css
1/* メディアクエリをrem指定する場合 */
2body {
3 font-size: 62.5%;
4 line-height: 1.4;
5}
メディアクエリをpxとかで指定する場合は素直にhtmlタグでフォントサイズを調整してしまい、コンテンツをrem指定にするのがカンタンです
css
1/* メディアクエリをpxなどで指定 */
2html {
3 font-size: 62.5%;
4 line-height: 1.4;
5}
フォントサイズの指定
レスポンシブ対応の場合 rem に対応していないブラウザがある可能性を考慮してpx指定を一緒にするのが良いかと思います。
css
1#wrapper {
2 font-size: 16px;
3 font-size: 1.6rem;
4}
デバイス別のフォントとサイズ
個人的にはむしろモバイルの方が大きめのフォントサイズになるように心がけています。
リンクを失念しましたが、ちょい前に読んだ海外のblogでコンバージョンを上げたりサイト滞在時間を伸ばしたかったらフォントサイズを大きくしなさいとあったものの影響と結構年配の方がタブレットやスマートフォン使ってて文字が見にくいという声を聴く機会が多かったからです。
基本的にPC・スマートフォン・タブレット デフォルトは同じフォントサイズにしています。
最近は1.6remにする事が多いです。
その上で、使う最小のフォントサイズを
・PCは 英文なら1rem・日本語なら1.1remまで
・スマートフォン・タブレットは 1.2remまで
リンクテキストならできれば1.4remまで
といった感じすることが多いです。
もっとも最近のモバイルファーストにして作る際は、スマートフォンに合わせてPCも最小フォントサイズ1.2remで統一しちゃってます。
全体をというよりは、特にタイトルなどPCで大きい文字がスマートフォンだと改行されすぎて読みづらいと言うことが多発するようであれば、タイトルをそれに関わる要素のフォントサイズを調整するということが多いです。
小さめの文字でおしゃれ感を出したいのか、blogのような読ませるベースで読みやすさを優先したいのかかとか、サイトのターゲット層は?とかに合わせてサイトの目的ごとにルールを作るのが良いかと思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/09/22 14:45
退会済みユーザー
2015/09/22 16:05
2015/09/22 23:25
退会済みユーザー
2015/09/24 15:01
2015/09/24 16:41