私のウェブページのこのセクションを反応させるにはどうすればよいですか？

Question

私が作ったページへのリンクは次のとおりです。https://thawing-savannah-89995.herokuapp.com/ これは私がPSDだけで助けなしに作った私の最初のウェブページです。

ここでは、私が問題を抱えている領域のSSがあり、ブラウザのサイズを縮小すると破綻します。このレイアウトは私が思考するのが非常に難しく、私はそれがすべきだったとは思わない。その部分のhtmlとCSSをよりうまく設計するにはどうすればいいですか？

Answer 1

私がコメントするには、この記事の時点で十分な担当者を持っていません。申し訳ありませんが、私はできればします。

flexboxというCSSのものを使用することをおすすめします。ブートストラップや960などではなく、少しの余分な作業が必要ですが、パーセンテージ単位との組み合わせで、さらに新しい年齢になりたい場合はvh/vwとなります。

This guideは、私が今まで以上にうまく説明できます。基本的にはダイナミックアラインメントシステムです。選択肢と比較して、センタリングは簡単です。主にflex-directionを変更するために、いくつかの@mediaブレークポイントが必要な場合があります。

最近、almost（申し訳ありませんIE）のユニバーサルブラウザがサポートされています。 IEについて気にしているのであれば、flexibilityのようなシムを使用してください。

ブートストラップのようなグリッドシステムを使用したい場合は、調べたい場合はalternativesが良いでしょう。個人的にはブートストラップのファンではありません。

Answer 2

レスポンシブサイトを作成して学んだ最も良い教訓は、これをモバイルデバイスでどのように見て、デスクトップに向かうかをデザインすることです。

Twitter BootstapまたはFoundationを使用し、応答性の高いテンプレートをダウンロードすることをお勧めします。どのようにこれを行うのかの概念を理解するのを助けるために見つけることができるさまざまなテクニックについて、多数の記事を読んでください。