widthがpx指定されたPCサイトをレスポンシブ対応したい

Question

HTML、CSS初学者です。うまく質問ができずにすみません。

HTML、CSSの勉強のため、
既存PCサイト(http://sugoiweb.nezihiko.com/)の
レスポンシブサイトを作成しています。(削除)
https://karujag.github.io/sugoi/

PCサイトは既存サイトの幅を確認しながら作りました。
全体を囲むarticleを960pxの幅で指定していて、中の要素もpxで指定しています。

ウインドウ幅が960px以下になると、表示が崩れてしまうので、
960px以下をブレイクポイントにして、floatを解除し、Widthを100%にして
縦に並べるようにしましたが、タブレットサイズで見たときの余白が気になります。

タブレットでも、余白が気になるところは、PCと同じように横に並べたいのですが、
どのようにCSSを指定したら良いのかがわかりません。
ブレイクポイントを増やして、一つずつwidthを指定する以外に良い方法はありますか?
(既にCSSをたくさん指定していますが…)

ソース(削除)
https://github.com/karujag/sugoi

![

Answer 1

求めてた回答にならないかもしれませんが、、
まずはじめにこの問いに正確な答えはありません。私もタブレットの縦とモバイルの横は嫌いです笑

例えばこんな風にテキスト回り込みで対応しているサイトがありました。
実際の2カラムレイアウトのRWDサイトをいろいろ見て、御自身がしっくり来る変形パターンを真似するのが一番かと思います。
http://robot-or-not.com/

なおRWDでは画像がpx固定なのは一般的でなく、殆どの場合上記サイトの様に親要素に対してwidthを%で指定します。あとはimgをそのような形でhタグに入れることはないですね（ダメということはありませんが、SEOの観点からしてもメリットはありません）
一度グリッドシステムについて学ばれた方が良いと思います。
メロン本と呼ばれるCSS教本がありまして、初心者には少し難しいかもしれませんがRWDのCSS設計がしっかり身につくのでおすすめです。

Comments

[退会済みユーザー]

ありがとうございます。自分でも読みにくいCSSになってしまい、書いていて不安になりました。
グリッドシステムのことなどがわからないので、メロン本を読んでみます。

Answer 2

質問で意図していたことは、

article{
width:100%
max-width:960px;
}

と指定し、中の要素を%で指定することで解決いたしました。