レスポンシブレイアウトでパンくずリストを使用する方法
レスポンシブサイトでパンくずリストを使用したいと思います。リンクが折り返されてレイアウトが認識されなくなると、パンくずリストが認識されなくなります。リンクの幅と数が異なるため、これは私のサイトに問題を引き起こします。
今後のメンテナンスとCSSのクリーン化のために、複数のページのブレッドクラムのサイズを画面の幅に合わせて変更する必要はありません。
いくつかのオプションがあります。私はレスポンシブな「どこにいるの？」ブレッドクラム ここに示されているとおり 。このオプションは、大きなウィンドウに完全なパンくずリストがあり、狭いウィンドウやモバイルデバイスでカスタムテキスト（「どこですか？」など）のみを表示するように縮小されます。例：
全画面表示：
Home > Section 1 > Section Title That is Longer
になる：
Where Am I? >
バックリンクに変わるパンくずリスト もあります。これは、大きなウィンドウに完全なパンくずリストを表示し、小さなウィンドウでは「戻る」という単語を表示しますが、ユーザーは「戻る」ボタンを使用するだけです。これはモバイルでは次のようになります。
< Back
狭いウィンドウのブレッドクラムを切り捨て、ページが狭い場合に短縮されたブレッドクラムに省略記号...を追加する レスポンシブブレッドクラムjQuery があります（ デモ ）。例：
全画面表示：
Home > Section 1 > Section Title That is Longer
になる：
Home > Section 1 > Section Title...