何が変わる

<meta name="viewport" content="width=device-width, initial-scale=1">が無いことに気をつけること。さらに、コンテナの幅をリセットし、折り畳みを防ぐためにナビゲーションバーが変更されている。基本的には問題なし。

ナビゲーションバーについて

ヘッドアップとして、ナビゲーションバーコンポーネントは、それを表示するためのスタイルがかなり具体的で詳細なので、やや難解である。デスクトップスタイルの表示を確実にするために再定義している。この実例の上部にあるナビゲーションバーを使用してサイトを構築すると、潜在的な問題があるかもしれない。

ブラウザ、スクロール、固定要素

非レスポンシブなレイアウトは、固定要素の重要な欠点を強調する。固定ナビゲーションバーなどの固定コンポーネントは、ビューポートがページのコンテンツよりも狭くなったときにスクロール可能にならない。つまり、非レスポンシブのコンテナの幅が970px、ビューポートが800pxの場合、170px分のコンテンツが非表示になる可能性がある。

ブラウザのデフォルトの動作なので、これを回避する方法はない。唯一の解決策は、レスポンシブなレイアウトまたは固定されていない要素を使用することである。

非レスポンシブ・グリッドシステム 見やすいよう色を付けています

3分の1
3分の1
3分の1

閉じる