特にレスポンシブデザインでは、デザインパターンは非常に便利です。 例について考えてみましょう。幅のタブがあるブロック内の大きな画面では、多くのタブが配置されますが、モバイルデバイスではレイアウトが移動します。 解決策は、すべてのタブをドロップダウンアイテムに圧縮する特別なデザインパターンを使用することです。
ブラッドフロストは、 適応パターンの非常に優れたコレクションでさえ、非常に便利にまとめました。 別の例は、結果のフィルターを備えた検索フォームです。 デスクトップには多くの場所があります。
小さな画面にはそれほど多くのスペースがないので、結果を下にして右側を移動するだけです。
表示を改善するために、フィルターをクリック/非表示/表示できます。
問題は、モバイルデバイスのページが下にスクロールされた場合にフィルターを使用する方法ですか？ 解決策は、画面の上部に接続され、常に利用可能な「フィルターバー」を作成することです。
開いた状態：
そこで、 レスポンシブデザインパターンを取得しました。 CSSコードには特に注目すべき点はありません;構造の変更にはメディアクエリが使用されます。 JavaScriptの部分では、 Persistent Headersの記事の例を少し変更して使用しています。
もちろん、彼はいつものようにすべての問題を解決するわけではありません。 それが、パターンではなくパターンである理由です。 「フィルターバー」に検索フィールドを含める必要がありますか？ おそらく。 フィルターポイントがさらにある場合はどうすればよいですか？ 上ボタンが必要ですか？ これらはすべて、特定のプロジェクトの作業過程で決定する必要があります。