問題タブ [responsive-design]

Internet Explorer 8 の可変レイアウト (max-width:100% を使用する画像) に問題があります。可変幅の画像と余白、パディング、および境界線の周りにアンカー タグをラップしたいときに問題が発生します。参加してください。これはあなたが思っているよりも少し難しいです。

したがって、HTML はおおよそ次のようになります。

そしてスタイリング：

私が持っているのは、パディングと境界線のあるアンカーに囲まれた流動的な画像です。

イメージがコンテナよりも小さい場合を除き、上記で問題ありません。その場合、アンカーのパディングと境界線はイメージを超えて拡張されます (コンテナの全幅を埋めます)。

それでは、アンカーをそのコンテンツに合わせて強制する何かを試してみましょう。

OK、アンカー ボックスは画像よりも大きくなりませんが、Firefox、Opera、および IE8+ ではアンカー タグが柔軟ではなくなりました。ただし、IE7 ではレイアウトがトリガーされるため、処理されます。次は：

アンカーは再び柔軟になりましたが、画像の縮小が始まるとコンテナよりも 12 ピクセル大きくなります。アンカーは画像に基づいて幅を計算し、境界線とパディングを追加します。何らかの理由で、Chrome と Safari はこれを行いません。とにかく、救助のための代替ボックスモデル：

現在、Firefox、Chrome、Safari、Opera、IE7、IE9 では期待どおりに動作していますが、何らかの理由で IE8 では動作していません。そこでは、アンカーはまだコンテナの外側に伸びています。box-sizing: border-boxIE8でサポートされているはずなので、どうすればいいのか少し困惑しています。

問題を切り分ける JSFiddle ページがありますhttp://jsfiddle.net/3gkXU/22/

最後の手段として、JavaScript を使用してアンカーがその親要素よりも大きいかどうかを検出しdisplay: block、人々がブラウザーのサイズを変更する可能性が低いと仮定してアンカーに切り替えることができます。私はそれに反対しているわけではありませんが、ここに CSS ソリューションはありますか?

Superfish jQuery プラグインを Nathan Smith の adapt.js スニペットと組み合わせようとしています。これは、ブラウザーの幅に応じてさまざまな CSS ファイルに動的に読み込まれます。ドロップダウンが意味をなさないため、モバイル モードで Superfish メニューを無効化/置換/何かしたい。変更を検出してメニューを無効にしようとしましたが、ウィンドウのサイズが再び大きくなったときに再度有効にする必要があります。

ここに私が持っているものがあります:

理論的根拠は、html 要素の id をresize(pagesize_0とpagesize_1- の間で) 変更し、CSS で子孫セレクターを使用してメニューを無効にすることでしたが、それは機能しません。再実行を試みsfMenu()ましたがresize(コードは上記に示されていません)、変更された DOM を検査していないようで、pagesize_1もはや存在しないことに気付き、正常に失敗します (これにより、私が求めている効果が得られると思います)。

何かご意見は？理想的には、superfishモバイルへのサイズ変更で機能を破棄し、画面が再び大きくなったときに機能を元に戻したいと思います。

私は現在、モバイル版のサイトを構築しています。

個別のドメイン（mobile.example.com）ではなく、応答性の高いアプローチ（メディアクエリを使用して画面サイズの特定のCSSをロードする）

しかし、「ページサイズ」を小さくする方法がわからないようです。

私のサイトのデスクトップバージョンには、5つの比較的大きな高解像度の画像をスライドするjqueryスライダープラグインが含まれています。私のモバイル側にはそれが含まれていません。ただし、これらのイメージは、モバイルバージョンのビルド時に引き続きロードされます。

displayプロパティをnoneに設定しましたが、これでも画像が読み込まれます。

では、JavaScriptまたは別のタイプのメディアクエリを使用して、ロードする必要があるファイルとロードしないファイルを指定するにはどうすればよいですか？

に設定されたコンテナがありmax-width:780px、高さが宣言されていません。コンテナの中には、画像のスライドショーがあります。ページ上のすべてがレスポンシブであるため、幅が減少すると、画像 (幅が 100% に設定されている) が高さコンテナーを調整します。

スライドショーは画像を変更し、コンテナーのコンテンツとして表示されないため、コンテナーを「開いたままにする」ことはありませんdisplay:static;。 position:absolute;

絶対に配置された子要素の高さを取得するための創造的なソリューションはありますか?

以下の例では、メイン コンテナーで高さが宣言されていません。何も開いていません。 http://dhut.ch/test/santos/

ありがとうございました！

http://www.taramenconi.byethost11.com/で私のサイトを見ることができます。1024 x 768 用に設計しました。また、一部の画面では大きく引き伸ばされているように見えることにも気付きました...大きなブラウザーを埋めるために意図的に背景を作成しましたが、コンテンツ領域は同じサイズのままにしたいと考えています。どうすれば修正できますか？

これが私のcssです：

私は大きな画像をスタイリングしている流動的なレイアウトを構築しようとしています:

これは問題なく動作します。問題は、html の img タグで幅と高さの属性を使用できなくなったことです (効果はありません)。これらの属性が必要なのは、ブラウザが画像が読み込まれる前に必要なスペースを「節約」できるようにするためです。これにより、画像が読み込まれたときにページの残りの部分が移動しなくなります。

両方の機能を持つ方法はありますか？(流動的な画像 + 画像の読み込み前に保存されたスペース)

960 グリッド システムを使用して Web ページを作成しました。そして、www.alistapart.com にある優れたアドバイスに従って、素晴らしく応答性の高いものにしました。

そのため、新しい Web ページの CSS を開発する際に、Dreamweaver のマルチスクリーンビューポート テスト オプションをチェックし続けたところ、小さい画面でもページがうまく積み上げられることがわかりました。ミニチュアのテキストも、ピンチとズームも必要ありません。

次に、ページをライブでテストすると、Ipad と Iphoneではウィンドウのサイズが変更されず、全画面表示の Web ページの縮小バージョンしか表示されないことがわかりました。

これをオーバーライドする簡単な CSS の方法があることを願っています。これにより、Apple デバイスでも応答性の高い方法で Web ページがスタックされます。

サイトにグリッド システムを使用する予定ですが、グリッドを選択的に分割できるようにしたいと考えています。これは、たとえば、OOCSS size1of2をsize1of1) に変換することを意味します。理想的には、html は次のようになります。

次に、次の css のようなものがあります。

OOCSSまたは別のグリッドシステムでこれを行う方法を知っている人はいますか? 単純なレスポンシブ グリッドとは対照的に、このレベルの制御を探しています。

フロートでちょっと困っています。さまざまなブラウザー幅のメディア クエリを使用して、少し応答性を高めたいサイトで遊んでいます。そのままではHTMLの流れでページが表示されるのですが、ブラウザを広げた時にblockquoteをimgの右側で折り返すようにしたいのですが、直前のp要素までしか折り返されません。

HTMLは次のとおりです。

私の HTML と CSS がどのように見えるかの例を次に示します: http://jsfiddle.net/tempertemper/MZWD9/12/

私がより広くしようとしているサイトはここにあります: http://tempertemper.net/portfolio

明らかな何かが欠けていると確信していますが、それが何であるかを理解することはできず、float が 2 つの隣接する要素のみをフロートするかどうか疑問に思い始めています。img タグと p タグの前後に div を配置することもできると思いますが、HTML をきれいに保ちたいと考えています。

すべての要素には幅があり、blockquote は含まれる要素に確実に収まります (つまり、li の幅は、すべての要素とそのパディング、ボーダー、マージンなどを含めるのに十分です)。すべての要素を左にフロートさせてみましたが、右にフロートさせたブロック引用を除きます。ブロック引用の前の要素に clear:left を使用してみました。喜びはありません。

誰でも私を正しく言えますか？

ありがとう、

マーティン。

投稿のコンテンツが div に読み込まれるエディターを構築しています。jQuery セレクターを使用すると、コンテンツをインラインで編集できます。

テンプレートのスタイリングに応答性を追加しようとしていたときに、ちょっとしたハードルに遭遇しました。私のテンプレート スタイルシートでは、プレビュー エリアの特定の ID を使用して、スタイルを適用する場所を指定しています。エディターのプレビューと投稿の完全なビューの両方が同じように見えるように、投稿の表示の body タグに同じ ID を適用します。

ビュー側にいくつかのメディアクエリを入れていたところ、プレビューページでは@media screen and (max-width: 640px)、プレビューが画面の幅全体を占有しないため、動作が異なることに気付きました。

画面の幅以外のメディアクエリセレクターを使用する方法はありますか?代わりに、要素の幅..または同等のものを使用できますか? または、単純にjavascriptを使用してその動作を模倣する別の方法があるでしょうか..