レスポンシブ デザインのサイトを構築する方法に頭を悩ませているだけで、レイアウトの変更に加えて、さまざまなサイズでレスポンシブにする必要がある機能も任されています。たとえば、デスクトップでは特定の要素にリンクが存在しない可能性がありますが、モバイル サイズではリンクが存在するだけでなく、大きなサイズではできなかったことを行う必要があります。
メディア クエリを使用して CSS の特定の要素のサイズや位置を変更することは理解できますが、さまざまなブレークポイントで機能 (JS や HTML など) を変更するにはどうすればよいでしょうか?
(この用語が存在するかどうかはわかりませんが、より適切な名前がないため、レスポンシブ機能と呼ぶことにします。)
レスポンシブデザインとアダプティブデザインの違いについて説明しています。
たとえば、レスポンシブ デザインでは、解像度が低い場合はサイドバーを単純に非表示にすることができますが、アダプティブ デザインでは、モバイル デバイスに固有のコンテンツを表示することができます (Web サイトはユーザーが電話を使用していることを認識しているため)。
このトピックに関するいくつかの優れたブログ投稿があります。
2 つの方法の最大の類似点は、どちらもモバイル デバイスとさまざまな画面サイズで Web サイトを表示できることであり、最終的に訪問者により良いモバイル ユーザー エクスペリエンスを提供します。2 つの方法の違いは、レスポンシブ/アダプティブ構造の提供にあります。RWD は柔軟で流動的なグリッドに依存し、AWD は事前定義された画面サイズに依存します。この 2 つの主な違いの 1 つは、RWD が流動的なグリッド、CSS、および柔軟な基盤を使用してより多くのコードと実装戦略を取る可能性があるのに対し、AWD はさまざまなデバイスや画面への適応を支援するためにスクリプトを利用する、合理化された階層化されたアプローチを持っていることです。サイズ。