問題タブ [responsive-design]

すべての製品の画像がブラウザのウィンドウ サイズに合わせてサイズ変更されるサイトを作成しているので、1 つの大きな画像を使用して別のウィンドウ サイズでサイズ変更するメディア クエリを作成しましたが、使用した画像が 1 つあります。背景、どうすればサイズを変更できますか? IE7 と 8 でもすべてのブラウザでサポートしてほしい。

HTML

CSS

私のライブコードはこちらです:- http://jsfiddle.net/jamna/DdxbQ/19/ここにメインの「製品画像」があり、ブラウザウィンドウのサイズに応じてサイズが変更されています(私のフィドルではコードを書きませんでした)製品画像のサイズを変更していますが、現在サイズを変更したい画像のみを表示しています)しかし、製品画像と同時にサイズを変更したい「スパン」の背景にある別の「節約ラベル」画像があります。

Sass が小数点以下を処理する方法を変更する方法はありますか? Sass はレスポンシブ レイアウトに必要な (ターゲット/親)*100 の計算を動的に実行し、コンパイル時に結果を出力すると言っている人を何人か見ました。パーセンテージ関数もあり、基本的に2つの値を取り、これを行います。

悲しいかな、Sass は小数点以下 3 桁しか教えてくれません。これまでの私の理解では、場合によっては、すべてのブラウザーが問題なくレイアウトを適切に表示するには、これが十分な精度ではない可能性があるということです。

誰でも私がこれを理解するのを手伝ってくれますか?

編集

解決しました。他の誰かが興味を持っている場合に備えて、@precision の値を変更して、Sass の number.rb で私が望んでいたことを達成することができました。これにより、すべての float の出力方法が変更されます。

私はレスポンシブウェブデザインを検討していて、そうするための多くの方法に出くわしました、しかし私はそうするための最良の方法を区別するのに苦労しています。

私は-本当に-これらの2つのサイトがどのように機能するかが好きです：

1. http://paulrobertlloyd.com/
2. http://colly.com/

ただし、がどのようにレイアウトを動的に変更しているかを理解できないようです。以下にリストされていない、私が見逃しているテクニックはありますか？

これまでのところ、私は次の方法に出くわしました。

1：Javascript

例-adapt.js

画面の解像度を動的に検出し、適切なスタイルシートを選択します。

2：CSS3メディアクエリ

次のような手法を使用します。

3：バックエンド

例-PHPファイルの先頭に追加

元のドメインをミラーリングし、ヘッダーを変更して、サイトの単一のモバイルバージョンでのみ実際に機能します。

私はこのマークアップを持っています：

私はこのレイアウトを取得しようとしています：

注：前のボタンと次のボタンは#playerの近くにあります

そして、私はこのようにしようとしています：

問題は、解像度が大きすぎたり小さすぎたりすると、レイアウトのようにとどまらないことです。

どのような解決策でもこれを達成するにはどうすればよいですか？

今夜、最初のレスポンシブ デザインを作成しようとしていますが、ページのサイズを変更するときに問題が発生します。大きなアイコンの下の数字と、ページの右下にある小さなアイコンを除いて、すべてが正しく応答しているようです。どちらも、フル サイズでない場合、デザインの残りの部分から「逃げる」ように見えます。また、ページの右下にあるボタンは、非表示にする必要があるもの (ボタンのホバー状態) を表示します。これを修正する方法についてのアイデアはありますか?

サイトはここにあります：[削除、私自身の問題を解決しました]

最近、自分のWebサイトのモバイルバージョンを作成しました。通常は問題なく動作しますが、コードスニペットでモバイルデバイスが水平方向にスクロールしない場合やYouTubeビデオの埋め込みで問題が発生します。

1. サイトのコード例に従って、 SyntaxHighlighterを使用してサイトのコードを強調表示します。これはデスクトップビューアには最適ですが、モバイルではコードを水平方向にスクロールできません（重要なコードの大部分を切り取ります）。

2. YouTubeのiframeコードを使用して動画を記事ページに埋め込みますが、動画をデスクトップからモバイルに正しくスケールアップおよびスケールダウンしてコンテンツコンテナを埋める（または最大サイズに達する）のは困難です。

これらの問題のいずれかに関する助けをいただければ幸いです。

http リクエストを減らして、css3 の代わりに svg で遊んでみるちょっとした実験を楽しんでいます...この HTML SVG を動的にスケーリングするように設定できません。理想的には、幅と高さを 50% に設定し、ウィンドウのサイズが変更されたときに残りをブラウザーに任せたいと思います。

コードは次のとおりです。

私はレスポンシブ Web デザインを使用して単純な Web ページを書いているので、CSS3 メディア クエリは画面解像度に基づいてさまざまなスタイルシートを提供します。簡単にするために、iPhone版とデスクトップ版があるとしましょう。動画を配信するために html5 video タグを使用しています。デスクトップでサイトにアクセスした場合は 720p の動画を配信し、iPhone でアクセスした場合はより小さな 320p の動画を配信したいと考えています。私は間違っていますか、html/cssだけで簡単に行う方法はありませんか? ビデオの src 属性を動的に変更するには、javascript を使用する必要がありますか? もしそうなら、ベストプラクティスは何ですか？前もって感謝します。

私はレスポンシブなワードプレスのテーマを書いています。帯域幅を節約するために、携帯電話の訪問者に異なる画像ファイル (より小さい) を提供したいと考えています。このようなことは可能ですか？

現在、モバイルの訪問者には CSS でサイズ変更された画像が表示されます。ありがとう！

画像を除いて、完全にスケーリング可能なシンプルなウェブサイトを作成しました。本体とすべて、div はパーセンテージに設定されています。実際、この方法で設計した私の目的は、任意の画面解像度にスケーリングするサイトを作成する練習をすることでした。画像以外はすべてスムーズに進みましたが、ページの残りの部分はブラウザーで拡大または縮小し、画像はオーバーフローするか、小さくなります (ブラウザーでズームインおよびズームアウトすると)。画像の幅と高さをパーセンテージで設定しても機能しません。ブラウザーを水平または垂直に引き伸ばしすぎると画像が歪むからです。

注:オーバーフローを非表示にする必要はありません。正しければ、画像が大きくなったときに画像が切り取られるだけです(ここで間違っている場合は修正してください)

高さ/幅を最大/最小に設定することも、理想的な解決策のようには思えませんでした。

しかし、この問題は他の人が遭遇していないとは信じられないように思われるので、誰かが解決策を見つけるのを手伝ってくれることを願っています. 助けてください...これは私にストレスを与えています:(