問題タブ [responsive]

友人のアーティスト (kouroshesfandiari.com) のためにサイトを作成していますが、レスポンシブ ナビゲーションに問題があります。横向きモードのデスクトップとタブレットでは水平 (インライン) ナビゲーションが必要で、縦向きモード (直立) の携帯電話では、ホバーまたはタップしたときに 3 本線のボタン アイコンにブロック スタイルのナビゲーションが表示されるようにします。

icomoon のアプリを使用して 3 本線のアイコン用の小さなフォント ファイルをインストールし、orientation:portrait メディア クエリを使用して、携帯電話にさまざまな機能を提供することができます。ただし、nav CSS またはそのポートレート メディア クエリで何を変更しても、機能は望ましくないようです。

私が携帯電話で望むように見えるようにすれば、ナビゲーションはタブレットとデスクトップのサイズのブロックのままです. ナビゲーションをインラインにして、タブレットやデスクトップで希望どおりに表示すると、携帯電話のビューではすべてが台無しになります。より良いアプローチをいただければ幸いです。現在、多くのサイトがこのタイプのレスポンシブ ナビゲーションを使用しているようですが、その方法を説明しているリソースが見つかりません。

HTML:

そしてCSS：

私は Google App Engine PHP Web サイトを持っていますが、すべて正常に動作します。ただし、明らかに、モバイル デバイスに読み込まれると、通常の Web ページと同じように読み込まれます。Web ページをモバイル デバイスにロードしたときに見栄えがよくなるように「変換」する最良の方法は何ですか? CSS経由？

まず第一に、私は Web 開発の完全な初心者です (2 か月間取り組んでいます)。ですから、「ばかげた」コメントや質問についてはご容赦ください。

MySQL データベースに保存された日付を保持するテーブルがあります。フォームを使用してこれらのデータをテーブルに送信します。

私の質問は：

「テーブルの各 ID にハイパーリンクを作成して、クリックするとレコードのデータが同じページに表示されるようにすることはできますか?」

私ができることは、テーブルを別のページに表示することだけでした。

600px のときにテーブルが画面に正しく表示されない理由を突き止めようとしています。私はそれをcodepenで試してみましたが、小さな画面で適切にレンダリングするのを妨げる何かがあるに違いありません。

(デモ)

これは、600px の Web ブラウザーで取得したものです。

Foundation 5 を使用して Web サイトを構築していますが、iPhone 6 または 6+ で表示するとデスクトップ バージョンが表示され、理解しやすいです。

しかし、(iPhone 4 または 5) のようにモバイル ビューに固執するための最良の方法/ベスト プラクティスは何ですか?

私は下の画像に見られるレイアウトをやろうとしています:

全画面表示で、ヘッダーとフッターの高さは固定(60px)、緑色のサイドバーの幅は 200px です。サイドバーと右側のセクションの両方が、y 軸上の使用可能なスペース全体を占有します。

ワイド画面の場合、右側を 2 つずつ表示する 4 つの等しいボックスに分割します。

中型および小型の画面 (< 768px) の場合、下の画像のように、4 つの等しいボックスを 1 つずつ 4 で表示したいと考えています。

私が持っているHTML：

私が持っているCSS：

可能であれば、 display:tableと display:table-cellを使用せずに、これらの赤いボックスのスタイルを設定して 2 つのレイアウトを実現するにはどうすればよいですか?

ありがとうございました！

5 つの異なる列があります。

すべてのコンテンツに がwidth: 100%あるため、サイズは予想より大きくなく、padding: 0px.

画面が XS (小型デバイス) の場合、列 (「ワクチン/チップ」) の 1 つが他の列の下に留まり、次の行に渡されて構造が破壊されます。

以下の画像が役立ちます：

大画面 (lg)

電話画面 (xs)

コード：

Android アプリを開発していますが、ワークフローがどうあるべきかわかりません。

機能に焦点を当てる必要がありますか?つまり、1 つの画面サイズのデバイスのみに焦点を当て、アプリを他の画面サイズに適応させる必要があります。

それとも、機能性に取り組むと同時に応答性にも焦点を当てる必要がありますか?