問題タブ [responsive-design]

私は現在、自分のサイトにレスポンシブ アプローチを使用し始めています。http://fluidbaselinegrid.com/がこれに最適なボイラープレートであることがわかりました。しかし、私が試したすべてのボイラープレートまたはグリッドで、ポートレート モードからランドスケープ モードに切り替えたときに、iPhone または iPad にメディア クエリを認識させることができません。

ページをロードする向きで常に正しい css をロードします。ただし、縦向きから横向きにするとハングし、適切にサイズ変更されません。

これはhttp://fluidbaselinegrid.com/でも見られます。

これが今のところ対処しなければならないモバイル Webkit の癖なのか、それともこれを修正する方法があるのか​​ 誰か知っていますか?

I'm looking for a way to display charts using HTML5 and fully reponsive to screen resolution. If you have something else not using Flash, I'm open to suggestion.

Also, I would like to be able to create these kind of charts:

• Pie charts
• Horizontal / vertical lines charts
• Countries charts (if possible)

Thanks

これに対する答えはすでにわかっていると思いますが、サニティ チェックが必要です。

私が持っていると言う

RESULT=TARGET/CONTEXT を使用して、幅をパーセンテージに変更できます。この場合、コンテキストは max-width が 1000px に設定されたコンテナーなので、次のようにできます。

ウィンドウを縮小すると、div は常にそのコンテナーに比例します。でもやりたいと思ったらどうしよう

現在 570 になっているターゲットに基づいて幅を調整できますが、ウィンドウが縮小されると、プロポーションがすべて同期しなくなります。

パーセンテージ境界線を使用できません。コンテキストをチェックし続けるために JS を使用したくありません。CSS3 の box-border 宣言はまだ使用できません。

Ethan Marcotte によるレスポンシブ Web デザインで説明されている技術を使用したい場合、すべてが相互に関連して縮小するというテクニックを使用したい場合、境界線を使用するとうまくいきませんか?

乾杯！

jQuery Backstrechプラグインを使用して、レスポンシブWebサイトにフルサイズの背景画像を実装しています。

jqueryコードをハンドヘルドデバイスに対してのみ実行するか、480ピクセル未満のビューポートに対してのみ実行する必要があります...実行できますか？

スクリプトと背景画像を実装するために使用しているコードは次のとおりです。

480ピクセル以下のクライアントに対してこのコードを実行するために、ある種のjQuery条件を追加するにはどうすればよいですか？

助けてくれてありがとう！

私は、David DeSandro による素晴らしい Isotope プラグインを利用するフォトブログを作成中ですが、現在、プラグインをレスポンシブ/流動グリッド内で意図したとおりに機能させるのに苦労しています。

www.lewismalpas.co.uk/tumblr (デモ)

各画像は、25% の明示的な幅を持つ div (.item) 内にラップされます。画像は柔軟であるため、理論的には 4 つの画像をインラインで表示できるはずですが、現時点では 2 つしか表示されていないようです。問題を理解するために。

Briefly:

How do I lay out N columns of random height portlets all in CSS so that if the browser is resized, the number of is columns reduced (using @media (min-width:)) and the portlets still sit nicely together on the page with no gaps.

This is similar to Float multiple fixed-width / varible-height boxes into 2 columns but more general.

Detail:

I've built a web application (PHP / Zend Framework) with a "dashboard" page made of a series of portlets. The portlets can be arranged in 1, 2, 3 or 4 equal width columns (user selectable) in a fluid layout. When the user resizes the browser window, the columns expand to fill the available width and the portlets also expand horizontally. The vertical height of each portlet is defined by its content. Some are only 1-2 lines, others can be 30-40+ lines of text / tables / image etc.

I want to turn this into a "responsive design" so that the user doesn't have to select the number of columns. On a small screen (eg iPhone) only one column will display. On a wide screen they might have 4 or 5 columns. If the browser window is resized, the number of columns will adjust up or down to allow portlets to stay approx 300-400 pixels wide.

I think I can do this with a bit of jQuery and some server side support (PHP), but would prefer to do it all in CSS if possible (no / minimal javascript).

写真のウェブサイトのデザインを開始し、左上隅に絶対位置のロゴを含めました。この領域は、絶対位置の div と div 内の画像で構成されます。

その絶対配置のdivとロゴを、画面サイズに合わせて縮小できないかと考えていました。

助けてくれる人はいますか？ここにリンクがあるので、私が扱っているものを見ることができます：

http://www.photographybytaraandclaire.com/newsite/index.html

Skeleton は、レスポンシブ Web デザインの原則に従って、モバイル ブラウザにも適合するようにスケーリングされます。Bootstrap は同じものを提供していますか?

レスポンシブレイアウトでAdSenseバナーを処理するにはどうすればよいでしょうか。

Adsense TOSから読み取ることができる限り、バナーをクライアント側で行うことはほとんど許可されていないため、解像度が低い場合は、クライアント側でバナーを小さいバナーに切り替えることはできません。 。

私が見つけることができる唯一の解決策は、最低のターゲット解像度（つまり、300x250）で機能するバナーのみを提供することであるようです。

より良いアイデアを持っている人はいますか？

私のcssには2つのメディアクエリがあります（印刷のものは数えません）： @media screen and (min-width: 720px) {}および@media screen and (min-width: 1026px) {

Respond.js を使用して、IE8 で動作するようにしています。奇妙なことは、メディア クエリの前に css に戻る最後のメディア クエリを除いて、完全に機能することです。つまり、ウィンドウの幅が 1026px のしきい値に達するまではうまく機能します。

そこで何が起こっているのか、誰にもわかりませんか？プレビューへのリンクは次のとおりです: http://bit.ly/i6ITPe

たくさんの答えをありがとう