スマートフォン用には基準となる文字サイズをbodyに記述。
16pxあたりに指定してナビゲーション以外のコンテンツ領域などのmargin paddingはem指定で余白を取る。
(16pxに指定している場合は1em=16pxで、16px × ○em=□pxという具合)
どこまで対応するかによるけども、
とりあえず普通に共通のCSSを読み込ませて、そのCSSファイルの中に以下を記述。
@media screen and (max-width: 767px) { /* 表示領域が767px以下の場合に適用するスタイル(スマートフォンやタブレット向け) */ } @media screen and (min-width: 768px) { /* 表示領域が768px以上の場合に適用するスタイル(PC向け) */ }
あとはソースをそれぞれ書いていく感じ。
ピクセル数は適宜適用したいwidthごとに分けて行く感じ。
ワンソースだと大変なので読み込みを分けたほうがステップ数が減らせるので
メンテナンス性も高いというところかなと思います。
あと、開発環境ではveiwport resizerがとっても便利でした。
http://lab.maltewassermann.com/viewport-resizer/
「CLICK OR BOOKMARK」でボタンのところをアドレスバーの下のブックマークしておき、
ブラウザでコーディングをしているページを開いている状態にします。
そのあとこのボタンへのブックマークをしたブックマークバーの中のブックマークをクリックするだけで、
画面サイズに応じたブラウズをシミュレートしてくれるという超便利モノ。
レスポンシブをレスポンシブルと言っている人を散見しますが、単語の意味合いが全く違ってくるので混同しないようにした方がよいです。Javascriptをジャバと言ってる人も同様に。そんな間違いをしていたらその職業の人として恥ずかしいです。
何年も前にアクセス解析についてよく分かってないくせに知ったかをして、「ユニークユーザー」を「ユニークな操作をするユーザー」だと発言してしまっていたのは、今では顔から火が出るほど思い出したくないので内緒(失笑・バカだなぁ~
ともかく知ったかは良くないので気をつけましょう!