私もまだまだベストプラクティスを模索しつつなので、少しでも参考になれば程度の内容です。
PCとモバイルで出力されるHTML・読み込まれるCSSが別のものでしょうから、
CSSに関しては
- デバイスごと(メディアクエリごと)に固定幅のデザインにするのでなければ、基本的にwidthは%指定
- フォントサイズはrem指定 (念のため先にpxして置くほうが良いかも?)
※ htmlタグにfont-sizeを指定していて、メディアクエリをremで指定しているとSafariでメディアクエリの切替がhtml要素に指定されているfont-sizeの相対値になってしまう現象に遭遇したので、文字サイズはbodyで指定してあげたほうが良いかもしれません。(他に同現象に遭った!ってのを聴かないので、自分の環境依存なのか未検証なのですが...)
iPad3/4サイズの時はwidth: XXXXpx, iPhone6の時は〜のように、メディアクエリごとに最小widthを固定にするのであれば、対応するデバイス幅ごとのメディアクエリを設定して、それぞれmin-widthで最小値を指定してあげる方法もあります。
※ どのデバイス幅を基準にするかと横スクロールがいかに発生しないようにするかが少し大変ですが。
viewportの指定は、
ユーザーに拡大縮小を許可するのであれば、Bootstrapなどでも採用されている
<meta name="viewport" content="width=device-width, initial-scale=1">
css
1html {
2 font-family: sans-serif;
3 -webkit-text-size-adjust: 100%;
4 -ms-text-size-adjust: 100%;
5}
拡大縮小を許可しないアプリのような感じ?にしたければTwitterなどが採用している
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
縮小だけ禁止したいのであれば
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
のような感じで指定してあげると良いと思います。
Getting started - BootstrapはGitHubやSassファイルもダウンロードできますので、これの、ベースとなるレイアウト部分とメディアクエリを指定しているCSSを参考にしてみるのが良いのではないでしょうか?
最近ではvw, vh という新しい単位での指定も出てきていますが、まだ挙動にばらつきがあるようなので、個人的には暫くは%・remメインの指定で良いのでは?と思っています。
[参考]
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 - コリス
Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい!?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。