問題タブ [responsive-design]

Skeleton を使用して既存のサイトをレスポンシブにしていますが、理解できないことが 1 つあります。

これは、次のように 2 つの列が隣り合っている場合に見栄えがします。

ただし、画面が小さく、列が垂直に積み重ねられている場合、積み重ねは問題ありませんが、フロートは見栄えが悪くなります。

列が重なっているときに検索ボックスを左にフロートさせるにはどうすればよいですか?

Skeleton のメディア タイプを使用して、検索ボックスのフロート スタイルを修正する必要がありますか?

ご協力いただきありがとうございます。

メディア クエリに問題があります。メインdivの幅を 960 ピクセルにしたいのですが、画面が 960 ピクセルより小さい場合は、現在の幅の 80% にしたいです。

960px からは 80% しか得られず、それよりも小さいすべての 80% ではありません (例: 800px の 80%、700px の 80%)。

HTML:

CSS:

流動的にしたいのですが、960px と 960px の 80% の 2 つの位置にしか固定されていません。流動的にするにはどうすればよいですか?

モバイルデバイスのレスポンシブデザインを定義する正しい方法は何ですか。iPhone 4（960 * 640）と一般的なAndroid（800 * 480）の一般的なデザインを作成したいとします。

メディアクエリを使用する必要がありますか？

また、一般的なAndroidデバイスは960pxではなく800px（横向きモード）で動作することを考慮に入れる必要がありますか？

これは私にとってまったく新しいことなので、問題はCSSを正しい方法で定義する方法です。正しいパラダイムは何ですか？

特定のサイズごとに定義する必要があります（960px以上と960px以下の2つのメインCSSがある場合）-またはデバイス（iphoneまたはandroid）ごとに定義する必要があります

メディア クエリ (media="screen and (max-width:640px)" など) を使用して CSS を変更する方法を理解しました。

しかし、私が書きたいとしましょう（ほんの一例です）

それを正しくするために書く必要がある条件は何ですか？

私は2つのことをしたい：

1. 私がSEO フレンドリーであり、テキストを正しく挿入したことを理解してください (検索エンジンはこれが「私のロゴ」であることを認識します)

2. 画面が特定の幅よりも低い場合にロゴのサイズを変更する方法を学びます(メディアクエリの操作方法を知っていると仮定して)

   /li>

両方を達成するにはどうすればよいですか？CSS はどうあるべきか、コードは正しく記述されているか?

モバイル デバイス (iPhone など) 用の特別なスタイル シートを作成しようとしています。

メインのスタイル シートに次のようなルールがあります。

特定のヘッダーの場合：（すべてを定義する本文を除いて、すべてのフォントサイズは em です）

iPhone で大きなヘッダーを表示すると、静かに小さく見えます。大きなサイズで表示するにはどうすればよいですか? すべての要素に「2倍大きくする」というルールを適用するにはどうすればよいですか（本文のフォントサイズを変更しようとしましたが、うまくいきませんでした）。

私は何を間違っており、どのように正しく行うべきですか?

私には次の2つのルールがあります。

これらは私のブラウザで動作しますが（ブラウザの幅を調整すると）、iPhoneで縦向きでも横向きでも確認すると、両方のスタイルシートが読み込まれます。

なぜ横向きで640pxのスタイルシートをロードするのですか？

私は一日中この問題を理解しようとしてきましたが、まだそれを理解していません：

私はこれらの3つのcssファイルが欲しいです：

• lowerThan960pxForDesktop.css（流動的なレイアウト用）
• MobileLandscape.css（iphone 960px android 800pxなど）

• MobilePortrait.css（iphone 640px android 480pxなど）

• Lanscape.cssがdesktop.cssを使用するようにしたい

• Portrait.cssでdesktop.csとLandscape.cssの両方を使用するようにしたい

メディアクエリまたはjavascriptを使用して、それを正しく行うためにHTMLをどのように表示する必要がありますか。私はこれを何度も経験しましたが、何かがうまくいかないたびに（デスクトップがmobile.cssを取得するか、iPhoneが横向きモードであってもPortrait.cssを読み取るなど）。

iPhone でウェブサイトをローテーションで自動スケーリングしたい。

このコード行を使用すると動作します:

しかし、問題は、横向きモードでは 1 つだけ有効にする必要があるにもかかわらず、縦向きと横向きの両方の CSS を有効にすることです。

cssの上のメタの代わりにこの行を使用すると、正しく動作しますが、ローテーションの自動スケーリングは行われません:

何が問題ですか？私は何をすべきか？

上記のメタ行に加えて、次の行もあります。

私はiPhone 4でそれをテストします（iOS5を使用）

CSSを使用して、左側のテキストフィールドを右側のすべての灰色のスペースに柔軟に埋めることは可能ですか?