問題タブ [responsive-design]

お祝いの挨拶スタッカー。IE7 と IE8 用のRespond.jsポリフィルと html5.js shivを使用して、CSS メディア クエリでレスポンシブサイトを作成しました。これらのブラウザーで最初にページを読み込むと、適切なフォント スタイルが適用される前に、大きなサイズのテキストが一瞬表示されることがあります。タイムズ ローマンの場合もあります。私はウェブフォントを使用していません。emsでフォントのサイズを調整しています。本文のフォントを 10px と 62.5% に設定してみましたが、違いはないようです。これは Respond ポリフィルの特性ですか?

乾杯

レスポンシブ デザインとモバイル Web 開発が標準になるにつれて、他の人たちと同じように、さまざまなモバイル デバイスとハンドヘルド デバイスでテストとバグ修正を行っていることに気付きます。従来、レイアウトや表示に関する CSS のエラーは、firebug や chrome 開発ツールなどを使用して修正するのが大幅に簡単になりました。これらのツールでは、JavaScript エラーも検出してデバッグできます。

ただし、同じ種類のエラーを特定して修正することは非常に困難になっています。JavaScript エラーがいつ発生したかを確認するためのエラー コンソールはもうありません。インスペクターもありません (最新のすべてのモバイル ブラウザーでリモート デバッグがあればいいのにと思います)。Opera に厄介なバグがあります (リモートでデバッグできることはわかっています: http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly )。 Android ブラウザーと iOS 用 Safari は、実際の手法ではなく力ずくで実行されますが、モバイル デバイスで応答性の問題をデバッグするための推奨ツール、手法、およびヒントは何ですか?

ありがとう

要するに：

レスポンシブ Web デザインを行う場合、1 つまたは複数のスタイルシートを使用する必要がありますか?

詳細に：

レスポンシブ デザインでは、CSS のメイン チャンクを 1 つ持つ傾向があり、次に、特定のブレークポイントに達したときにレイアウトを調整するためのその他の小片を用意します。次の 2 つの方法のいずれかでコードを構成できます。

単一のスタイルシート

複数のスタイルシート

1 つのスタイルシートを使用すると HTTP リクエストの数が減るように見えますが、一部のクライアントでは使用されない可能性のあるコードを含むファイルが大きくなります。複数のスタイルシートを使用するとファイル サイズが小さく保たれるように見えますが、HTTP 要求が増えます。

それぞれのアプローチをいつ選択する必要がありますか? HTTP リクエストの数とファイル サイズの長所と短所は、実際にはどのように積み重なるのでしょうか?

現在私はこれを使用しています：

HTML：

CSS：

ここでの利点は、Javascriptをまったく使用していないことです。しかし、その後、絶対的に配置された要素は、別の画面で表示すると悪夢になります。

現在私が持っている解決策は、さまざまな画面サイズに従ってこれらの要素を記述して配置し（たとえば、1024x768のIDコンテンツのトップ値は10pxですが、1280x800のトップ値はtop：25pxなどです）、次のように保存します。別のcssファイルなので、ページの読み込み中に適切なCSSを読み込むことができます。これには時間がかかり、おそらく非効率的だと思います。パーセンテージ値を使用することは、私がまだ検討していないオプションです。エレガントなソリューション、またはabout.meの大物がそれをどのように行うかを知っているなら、それは役に立ちます。

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

ブラウザ/画面のサイズ変更でレイアウトが拡大縮小するFluid +レスポンシブレイアウトを作成しています。

私が パーセンテージで使用する場合、それはすべてのものに使用するfont-sizeのに適しています。body%em

• font-size
• width
• margin
• padding
• border-width
• border-radius

または私はemのみを使用する必要がありますfont-sizeか？

私の目標は、スケールアップとスケールダウンの際にすべてのバランスを維持することです。

emいつ使うべきか、いつ使うべきか少し混乱してい%ます。私font-sizeの体は62.5%

Web サイトにレスポンシブ デザインを実装しようとしていますが、注目のコンテンツ スライダーで少し動けなくなりました。

注目のコンテンツ スライドにCoda Sliderを使用しています。画面幅が小さい場合は、スライダーの jQuery 関数を中止し、スライド関数のインライン スタイルを削除して、単にブロックを表示するようにします。 .

以前にこのような例を見たことがあると確信していましたが、ここに投稿する例をブックマークで探してみたところ、実際にこのように機能するように見えるものは見つかりませんでした. おそらく、JS の制限によりこれが実現不可能になるためでしょうか?

スライダーを実装するために使用している jQuery を次に示します。特定のサイズ未満の画面幅に対して中止して通常に戻るように単純に追加できるものはありますか?

今のところ、次のように head でメディア クエリを実装した 2 つのスタイル シートを単純に使用しています。

したがって、JS の中止をモバイル スタイルシートの開始に対応させたいと考えています。基本的には、コンテンツを CSS のみで表示し、完全なサイトでスライダーが行うような JS のプレゼンテーション アニメーションなどは使用しません。

そこで、max-widthプロパティを使用して注目の画像を拡大縮小しましたが、ナビゲーション画像アイコンでも同じ効果が得られるかどうか疑問に思っています。これは画像スプライトで実行できますか、それとも推奨される方法は何ですか？

レスポンシブ/アダプティブ画像のいくつかの手法を検索して試しましたが、それらのほとんどが html5 キャッシュ マニフェストに干渉することがわかりました。

この方法が良い方法であるかどうかについてフィードバックをお願いします (注: スクリプトが実行されるまで画像のダウンロードを遅らせますが、画像リソースの二重ダウンロードを防ぎます)。

典型的なhtml:

JavaScript：

私は他の誰かのcssを変更していて、@mediaクエリを実装してページをレスポンシブにしようとしています。私は実装しました：

これは正常に機能しますが、@ media screenと（max-width：600px）{}を実装すると、機能していないようです。

または-クロームとオペラでは問題なく動作するようですが、FFでは動作しません。FFではページが右端で切り取られ、スクローラーがなく、理由はわかりません。positon：relativeを使用しても変更されません。確認します。「overflow：hidden」はありません。

もう1つは、メディアクエリの場合、min-widthを使用することをお勧めしますが、min-widthを使用する場合は、最小値（たとえば、min-width：600）のみが適用されます。

私はここで何かを逃したと思います...何か提案はありますか？レスポンシブウェブデザインにとても熱心なので、本当に感謝しています。