問題タブ [responsive-design]

私は今日http://mediaqueri.es/をチェックしていて、ウェブサイトがモバイル デバイスに素晴らしく適応することを知りました。そこで、jQuery Mobile と応答/適応型レイアウトをメディア クエリと共に使用するのは冗長ではないかと考えました。メディア クエリのみを使用するのは良いアプローチのように思われるからです。それは本当に冗長ですか、それともカフェインでつまずきますか?

編集

例:この Web サイトは、メディア クエリを使用して非常にうまく機能しているため、jQuery Mobile を使用することでどのようなメリットがあるかわかりません。

公平を期すために言うと、この Web サイトが jQuery Mobile なしで完成しているとは思えません。jQuery Mobile を使用せずに「ネイティブ アプリ」のルック アンド フィールを再現するのは難しいと思いますが、これは正しいですか?

私は次のCSS宣言を使用しています：

これをアーカイブするには：

基本的に、中央のサムネイルを除いて流動的なレイアウトです（部分的に流動的です）。要素を積み重ねる唯一の方法は、要素の幅（この場合）を定義することであることに気付きましたmin-width。

ここで、ブラウザのウィンドウがこのサイズに達したとき：

右側にスペースが残っています。

右側のスペースを画像で埋めることができるのではないかと思いました。

編集：画面解像度の傾向（iPad、Android、iPhoneなど）に応じてdivの幅を定義する必要がありますか？

これは、テーマがフルサイズの場合です。

ブラウザのウィンドウが小さくなると、サイドバーが下に移動し、メインコンテンツがレイアウト全体を占めます。

私はこれがトリックを行うCSSだと思います：

（よくわかりません）。

これはテーマのデモです。

サイドバーは、CSSを使用して特定のウィンドウサイズでどのようにスタックダウンするのですか（メインコンテンツがすべてのスペースを占めるようにします）？

ブラウザ間で互換性のある方法でレスポンシブにサイズ変更する画像を表示する方法を考案しようとしています。CSS3 メディア クエリは広くサポートされていないため、使用することはできません。ただし、jQuery を使用すると、HTML5 の「データ」属性を利用できます。

これが私が思いついたものです。他の誰かが良いアイデアを持っていますか? または、このアイデアに微調整を提供できますか?

さて、メディアクエリとを使用して、非常に小さい画面サイズの画像を表示しないレスポンシブレイアウトを設計しましたdisplay: none;。

ここまでは順調ですね。ただし、これらのイメージは引き続きこれらのデバイスにダウンロードされるため、帯域幅が増加します。

これらの画像を指定されたデバイスにダウンロードしないようにする適切な方法は何ですか？

どんな回答でも大歓迎です！

レスポンシブ デザインについてまだ知らない人には、このリンクをお勧めします。

次のようなメディアクエリを理解しない限り:

私はあなたができるadapt.jsの使用を検討していました:

これは960 グリッドで使用するためのものですが、それらの .css で好きなものを使用できます

しかし問題は、JavaScript を有効にする必要があることです。もっと柔軟な (レスポンシブな!) ソリューションを知っている人がいるといいのですが。

複数のデバイス (デスクトップ/タブレット/モバイル) 用の可変レイアウト ページ (CSS で % ですべてを定義) を設計しています。

width:100% を指定すると、使用可能なビューポート全体の幅 (つまり、使用可能なブラウザー領域) が取得され、それに応じてすべての % 幅が計算されることを理解していますか?

しかし、私の質問は、流動的なレイアウト CSS を定義するために、「ピクセル」の高さを % の高さに設定または変換するにはどうすればよいですか?

この画像のようにレイアウトしたいサイトがあります。

赤がデスクトップ版、黄色がモバイル版です。メディア クエリを使用して、この 2 つを簡単に切り替えることができます。

私の問題は、デスクトップ バージョンの CSS をどのように記述するかということです。レイアウトによってデスクトップ バージョンのレイアウト手法が除外されるため、モバイル バージョンのみを含めます。

各ペア (A と B など) 内のコンテンツの高さは異なる場合がありますが、それらは十分に類似しているため、次のペアのヘッダーが整列するように同じ高さに配置したいと考えています。

私が推測する最も簡単な方法は、各ペアの高さをハードコーディングすることですが、可能であれば避けたいと思います。

ハンドヘルド デバイスで Web サイトのサイズを変更しようとしていますが、何らかの理由でスタイルシートに応答しません。レスポンシブ デザインのリンクを見て、www.sofiamillares.com をサイト テストとして配置すると、トップ ラインが途切れて、すべてが非常に大きく見えます。

なぜそれがそうしているのか、そしてそれを修正する最も簡単な方法は何ですか？

最終的に応答性の高い Web レイアウトを作成するために、静的な幅をパーセンテージに変換する方法を理解したいと思う単純な静的レイアウトをまとめました。レイアウトの幅、フォントサイズ、パディング、マージンをパーセンテージで計算する最も簡単な方法を推奨できる人はいますか? 私は静的な形式でレイアウトを作成することに慣れていますが、この % テクニックを実装する方法を完全に理解したいと思っています。

私の簡単なレイアウトへのリンクはここにあります: http://jsfiddle.net/9fH87/

すべてのアドバイスを歓迎します、カイルに感謝します