拡大縮小しても文章の行数の変わらないレスポンシブWebサイトを作りたい

Question

画面を拡大縮小しても一切デザインの変わらない
レスポンシブ対応のWebサイトを作りたいと考えています。
メディアクエリで作成しています。

悩んでいるのはテキストの扱いです。

画像であればwidth:100%;と指定すれば
画面サイズに応じて拡大縮小してくれるので問題ありません。

しかしテキストの場合、大きな画面では1行で表示される文章であっても、
画面が縮小されるにつれ、2行、3行と行数が増えていきます。

行数が増えるのではなくて、比率を保ったまま
画面が縮小されても1行の文章は1行で表示されるようにしたいのです。
もちろん画面・ボックス内からはみ出したりせず、
画面内・ボックス内にサイト全体が収まるようにしたいです。

font-sizeをemなどの相対サイズにしたり、
ボックスのアスペクト比を固定してみたりと試したのですが、
どうもうまくいきません。

画面の拡大縮小にかかわらず、デザインも行数も一切変わらない
レスポンシブWebサイトを作るには、
どのような設定をすればいいのでしょうか？

細かな設定方法はできるだけ自分で調べるつもりですが、
「こういう手法を使えばいい」とか、「こういうプロパティがある」など、
大まかな方向性だけでも教えていただけると助かります。

よろしくお願いします。

Comments

[maisumakun]

どのような目的があってそのようなサイトを作りたいのでしょうか？

Answer 1

行数が増えるのではなくて、比率を保ったまま

画面が縮小されても1行の文章は1行で表示されるようにしたいのです。

タイトルロゴのような、画面幅を変えても1行を超える心配のないものであれば別ですが、一定量の「文章」という枠で考えると、そもそもの要望自体が適切ではないと考えます。

極端な話、パソコンの場合は画面幅が横長、スマホの場合は縦長となりますが、この2つでどう揃えるイメージでしょうか。スマホで可読にした場合、パソコンだと大きすぎる文字が表示されることになります。

画面の拡大縮小にかかわらず、デザインも行数も一切変わらない

レスポンシブWebサイトを作るには、
どのような設定をすればいいのでしょうか？

それはレスポンシブとはいいません。ただの固定レイアウトです。

Answer 2

私は「vw」という単位を使っています。

vwの求め方は
フォントサイズ ÷ コンテンツ幅(デザインの幅) × 100 = vw
となっています。

元のデザインの幅が例えば750pxだとして、フォントサイズが24pxだとしたら、
24px ÷ 750 × 100 = 3.2vw

font-sizeに3.2vwを指定すれば、画面幅によってフォントサイズが変動していきます。

ただ、ブラウザによってフォントサイズの縮小制限があります。
(Chromeだと10px以下にはなりません。)
なので、デバイスによっては改行位置が変わっていってしまうことがあります。
こちら参考に
http://blog.upshare.co.jp/2017/07/3730/

Comments

[cheshire-cat]

vwですか。たしかに行数が変化しません。

vwという単位があることは知識としては知っていましたが、
具体的にどのような使い方をするのかは知りませんでした。

勉強になりました。ありがとうございます。

Answer 3

パッと思い付いたのを挙げます。
仕様は満たせても悪手です。

全部画像に。

---

「どんなデバイスでも同じ」というのは割りと土台無理な話と思います。
ユーザーは自由な環境で自由な幅で見るわけですから。
で、あれば「全部同じレイアウト」ではなく、レイアウトもそれぞれの幅で変えて見やすく読みやすくを目指すのが良いのではないかと思います。レスポンシブってそこが利点では？

グリッドレイアウトが良い例でしょう。幅によって一列のブロック数が変わります。

Googleによってモバイルファーストが提言されていたはずなので、まずはモバイル向けに作り、そこから広げてレイアウトを決めていくといい感じになると思います。
(私はそのあたりは既存のCSSフレームワークに任せて個々にどうあてはめるかだけ考えるようにしてます)