実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。
- メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなるとbackground-size: cover、background-position: center center;の組み合わせが良いのでは。
- メインキャッチのロゴなどは絶対値のtop,left50%+transition50％で要素分元に戻す。ただの文字などはtext-align:centerで
- フォントは明朝ではなく、ゴシック系で。「ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’;」の組み合わせ
- 比率の修正に関してはsassがあると非常に作業がしやすい。これをincludeで呼び出して、処理をする。768pxを境界にすると良い。
- pcだったら横にしておいて、スマホだったら縦にする場合は、flexのspace-arond or display inline-block →display:block。flexの縦並びは多くの環境で崩れたので、対応していない端末が多いかも(IE11とiphone5)
- 中央幅の作りはPC:固定幅(あるいは%+min-width)+margin-left(right) auto , スマホ用%幅+margin-left(right)auto。
- 中央幅は必ず変数制御。それ以外の要素もなるべく変数でコントロールし、呼び出すようにする。
- PCとスマホでどの要素を共通にするかしないかをコーディング前にしっかりとコントロールしておくこと。またメディアクエリはPC(default)ファースト+スマホのメディアクエリの方がしやすい。
