既存のHPをレスポンシブwebデザイン化する流れを教えてください

どういったやり方がスマートなのか知りたいです。
私的には、既存のcssはpc用なので
@media all and (min-width: 768px)
のようにしてほとんどすべてのcssをこの中に入れます。
その後スマホ専用のcssをコツコツ書いていくといったやり方です。

ですがこの方法では、一からスマホ用のcssを書かなかればならないので、無駄があるのかなと思います。
pcのcssを使えるところはスマホ用としておきたいのですが、皆さんはどういったやり方なのでしょうか？

行動規範の内容に同意します

回答3件

コメントの返答になります。
スマホでPCのような画面になるとのことですが、htmlファイルにviewportの記述はしてますか？
viewportの指定を正しく記述していないとスマホから閲覧してもPCのように表示されることがあります。
viewportは、下記のようにhead内に記述します。

lang
1<head>
2<meta name="viewport" content="width=device-width">
3</head>

viewportや解像度については、下記のサイトをご覧ください。
Webサイト制作でつまずきがちな解像度に関わるあれこれ

投稿2015/02/01 13:09

退会済みユーザー

総合スコア0

退会済みユーザー

2015/02/01 15:08

ありがとうございます。それで解決しました！レシポンシブwebデザイン化するには、どのようなことから取り掛かるのが良いのでえしょうか？例えば背景からずれているなら調整し、画像、文字といったように段階的にするなど。アドバイスありましたら教えてください

退会済みユーザー

2015/02/02 07:13

レスポンシブデザインにするには、レイアウトや画像、文字、テーブルなどをレスポンシブにする必要があります。最初に技術を覚えることが必要になります。個人的には「レスポンシブWebデザインマルチデバイス時代のコンセプトとテクニック」という書籍がわかりやすかったです。HTML／CSSの知識があるなら書籍に記載されているコードを書き写さなくても読むだけで理解できるかと思います。何から取り掛かるかと良いかは、作る予定のデザイン等に左右されるかと思いますが、私なら最初にデバイスごとのデザインを作成します。そのデザインをもとにCSSを記述してレスポンシブにします。

行動規範の内容に同意します

仰るとおり、PCのCSSは利用した方がよろしいかと思います。
PC用のCSSを書いたあとにスマホ等のCSSを記述するのはいかがでしょうか。
後から書いた記述が適用されますので、変更したいCSSのみ記述すればよろしいかと思います。
下記の記述だとスマホ（768px以下）の場合は、contentsの横幅が50%になります。
headerとfooterはPCで記述してあるCSSが適用されますので、スマホ（768px以下）でも横幅は100%になります。

lang
1/* PCのスタイル */
2.header { width:100%; }
3.contents{ width:100%; }
4.footer{ width:100%; }
5
6/* 768px以下のCSSを記述 */
7@media(max-width:768px){
8.contents{ width:50%; }
9}