レスポンシブwebデザインで横幅を変更せずに文字を

質問

よくレスポンシブwebデザインで横幅に合わせて基本的には、横幅を320pxにしてサイトを設計するという記事をよく見ますが、横幅が640pxのRetinaディスプレイで見ると画像やyoutubeの動画の画質が悪くなってしまいます。
なので、サイトの横幅を640pxにして、PCで見るときはfont-sizeを12px、line-heightを16pxにして、スマートフォンで見る際には、倍のfont-sizeを24px、line-heightを32pxにというように、横幅を変更するのではなく文字サイズの変更だけをしてサイトを制作するつもりなのですが問題ないですよね？

回答No.2

ORUKA1951 · ベストアンサー

レスポンシブデザインとは、画面のサイズに合わせて表示サイズを変更する--いわゆるリキッドデザインと似た考え方です。
　スマートホンなどの様々なビクセル幅のディスプレイに対応したデザインですが、「基本的には、横幅を320pxにして」と言う時点で、それを放棄しています。
　そもそもHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

最低限、きほんですから
★HTML 4の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html )
　位はじっくり読んでおきましょう。

　ウィンドウ幅を固定せず、ユーザーの環境に合わせて一行が折り返されても良いように作成すべきものです。文字は、スケーラブル--ベクトル図形ですから、SVG( http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics )のように解像度に関わらずフォントの縁は滑らかになるので、視覚弱者のユーザーがフォントサイズを大きくしてもふちが荒れることはないはずです。

　iphoneのRetinaディスプレイは、ディスプレイ上の解像度が高いため、画像が荒れて見えることがありますが、その仕組みを理解していないと「画質が下がる」という結果になります。通常のパソコンのディスプレイは描画処理の関係上、96dpi(一インチあたり96ドット)で計算して、実際のディスプレイの解像度が120dpiだったとすると、そのスキマを適当に埋めて表示しています。Retinaディスプレイは、それを326ppi--約４倍で計算していますから、96dpiで表示することを想定した画像は荒くなってしまいます。
　この場合、大きな画像を表示上は小さくなるようにしておけば良いはずです。

　実はこの現象--ウェブページを印刷したことがあれば経験済みのはずです。プリンターは低画質でも200dpi,高画質でしたら600dpiとか1200dpiですから、当然足りない部分は適当に穴埋めされるため汚い印刷結果になるはずです。その対策として横幅1200pxくらいで画像を作成して<img src="[URL]" width="400"***>のように縮めて表示させておくと、きれいに印刷できますね。

　ウェブデザインの、根本的な部分で誤解をされているようです。基本は
div.article{width:80%;min-width:480px;max-width:900px;margin:0 auto;}
　のように、最大幅、最小幅を指定した上でデザインしていくのが基本です。

　フォントサイズは、指定しません。私は、ユーザーのデフォルトのサイズを基本に、
h1{font-size:1.6em;}
h2{font-size:1.4em;}
h3{font-size:1.3em;}
h4{font-size:1.2em;}
h5,h6{font-size:1.1em;}
h1,h2,h3,h4,h5,h6,p,li,dd{margin:0;line-height:1.5em;}
とかの指定が基本です。

　ウィンドウ幅、フォントサイズは現代のように様々な端末を考慮しなければならない時代は、こちらからは決めるべきではありません。それがウェブの基本です。

補足

端末によって1インチあたりのドット数が違う事、画像の画質を低下させずに画像を表示する方法、フォントサイズはピクセルで指定しない事という基本的な事を教えてくださってありがとうございます。Media Queriesもまだ理解していないので、調べて理解します。

回答No.1

dscripty

「横幅を320pxにしてサイトを設計する。」

↑この時点でレスポンシブじゃなくなっちゃってる。

どんな横幅のピクセル数を持った、どんなデバイスでも、
それなりに、そのデバイスに適したページ表現をすることが

『レスポンシブ・ウェブ・デザイン』！

「横幅を変更するのではなく文字サイズの変更だけをしてサイトを制作するつもりなのですが問題ないですよね？ 」

そのやり方は、どちらも、ユーザにページの見え方を押し付ける、上から目線な感じ。。。

view の width は device の width で、body 要素の中の width や font-size は、ブラウザの自動処理と相対サイズ指定(% とか em とか)に任せると、調整がすごく楽になる気がするよ？