初めてレスポンシブ Web サイトを構築しようとしていますが、Twitter Bootstrap を使用したいと考えていました。それらが移行段階にあり、ドキュメントが存在しないことがわかったので、Vanilla CSS オプション 1 である Foundation v4 に切り替えました。
とてもシンプルなレイアウトを作ってみましたが、とても気に入りました。
それが 960gs で動作することを考慮して、私はそれに基づいて設計しました..コード作成前の段階 (プロジェクトはまだ承認されている必要がありますが、時間に余裕があり、すでにコーディングを開始しています) で、Foundation が垂直整列システムが付属していません。
基本的に次のようなレイアウトを作成しました。
そして、これはヘッダー（残りは正常に機能します）がモバイルでどのように見えるかです：
基本的に私は3つの問題を経験しています:
1) Zurb ではどのようにしてコンテンツを垂直方向に再配置できますか? 私はヘッダーがこれを吸うのを知っていますが、彼らはメニューバーを大きな画像に「触れる」ように調整し、ソーシャルメディアのアイコンがロゴである左の画像の半分になるように調整しました..そして私はそれを行う方法がわかりません
2) オブジェクトは、モバイル版の 2 番目の写真のように自動的に配置されますか?
コンテンツの垂直方向の間隔を空けたり再配置したりする方法を見つけるために、1時間以上検索したことを誓いますが、それができないようです..
そして、ここに私の3番目の質問があります：
3) メディア クエリに慣れていないことを考慮して、Foundation (既にセットアップされている) で機能させる方法を見つける必要がありますか、それとも、このようなレイアウトでカスタム メディア クエリを作成する方がよいでしょうか? 私は実際にメディアクエリにいくつかの問題を抱えています。そのため、現在フレームワークを使用しています。
助けてくれてありがとう、Foundation 4 で狂わずにこれを機能させる方法があることを願っています!