レスポンシブのサイトを作る時、%の微調整

Question

レスポンシブのサイトを作る時、すべて縦横幅を%表記すると思いますが、アイコンやボタンを44px以上で固定したい、PCで大きくなりすぎて困る、微調整したなどあった場合、どのように記載しますか？

最大最小はmax、min-widthとして、間の微調整はそれぞれのブレークポイントで%を変えて、微調整するのが一般的でしょうか？

Answer 1

max-width,min-widthで最大最小を固定しつつ、中間サイズはブレイクポイントで%調整して対応します。

flexはよほど環境が限定された案件でもない限り、実案件で使おうとは思いません。レスポンシブの場合IEも含めて幅広い環境に対応する必要があるので、3種類の構文の併記と非対応環境へのフォールバックが必要となり、面倒極まりない状況になることが予想されるからです。

あとレスポンシブでIE8対応と言われたら、私ならデスクトップファースト方式で作ります。IE8では単に固定レイアウトのpcサイトとして表示されるので、特別な対応がほとんどいらなくなるからです。

どうしてもIE8対応でレスポンスもさせたいなら、上の方も回答しているようにポリフィルScriptを利用して対応しますが、その場合は納期と予算を別途請求しますね（苦笑）

Comments

[aKusano]

display:flexについて念のため追記です。

▼flex対応状況
http://caniuse.com/#search=flex

1) 2009年仕様…Android4.1,4.2
2) 2012年仕様…IE10
3) 最新仕様（プリフィックス有／無）…その他

この３つはプロパティ名、取れる値の種類、
提供される機能などが大きく異なりますので、
「Android4以上全て」「IE9以上全て」がサポート対象に含まれる場合
現実的に結構困ります。
最新ブラウザ以外全部無視でいいならもちろん喜んで使うんですが・・・(；´Д｀)

[退会済みユーザー]

いつもありがとうございます。
display:flexは、IE10以上でないと使えないのですね。
実務ではまだ早いかもしれませんね。

Answer 2

私ならcss3のflexboxを使うことを考えます。
ただし、多少複雑なのと、比較的新しいブラウザが対象となってしまうのが
現在の難点です。
現在でも、モバイルであればほとんどの場合大丈夫だと思います。

以上が新しいブラウザの場合ですが、IE8のような古いブラウザでは、
respond.jsでmedia queryというものを使えるようにして、
screenの横幅で場合分けをして、対応します。
この場合には%で幅を指定するのは一般的なやり方だと思います。
個人的には、BootstrapというフレームワークのGrid Systemの使用を
検討すると思います。この場合にもIE8では、先ほどのrespond.jsと
html5shiv.jsというものが必要です。
Bootstrap Grid

Comments

[退会済みユーザー]

アンドロイド４以上、iphone5以上ならほとんどのCSS３は問題なく使える状態なのですね。

[退会済みユーザー]

IE8も入る時はどうしますか？

[退会済みユーザー]

詳しいお話ありがとうございました。