問題タブ [responsive-design]

Wordpressのレスポンシブテーマを作成していますが、レスポンシブ画像で問題が発生しました。コンテンツ内にある画像のサイズを変更する必要があるということです。私のロジックでは、そのためにフィルターを使用する必要があると言われていますが、具体的に画像をターゲットにするフィルターが見つかりませんでした。私の最初の考えはそのためにJSlibを使用することでしたが、この特定のライブラリは大きい画像と小さい画像の両方の名前を取得したいと考えています。私のWebサイトはいくつかのカスタムメディアサイズを使用しているため、小さい画像の名前を正しく取得する方法が見つかりませんでした。 。

もう1つの方法は、cssを使用することです

しかし、ここでも、imgタグからwidth属性とheight属性を削除する必要があります。

したがって、基本的にどちらの方法でも、コンテンツを調べて画像タグを解析し、それらを新しく生成されたものに置き換える必要があります。

さまざまなプラグインソースを調べたところ、それらがthe_contentをフィルタリングし、正規表現を使用してimgタグを見つけて新しいものに置き換えることがわかりました。

だから私はこれを正しい方法で機能させるための解決策を探しています。なぜなら、画像を置き換えるためだけにコンテンツ全体を調べるのは正しい方法ではないと感じているからです。それを行うためのより良い方法がない場合は、誰かが私の小さな問題を解決するためのコード（特に正規表現）を手伝ってください。基本的に、imgタグを検索し、幅と高さの属性を削除する必要があります。

レスポンシブウェブデザインが960.gsのようなCSSグリッドシステムとどのように連携するかについて少し混乱しています。

Nathan Smith（作成者または960.gs）は、しばらく前にAdapt.jsを思いついたのですが、バンドルされているスタイルシート（mobile.css、720.css、960.cssなど）を調べると、グリッドの数が明らかです。列は変更されず、個々の列の幅とそれらが一緒にスタックされる方法のみが変更されます。

一方、 978.gsは別のパターンに従っているようです。

• 300pxグリッドには8列あります
• 748pxと978pxの両方のグリッドには12列あります
• 1218pxと1378pxの両方のグリッドには16列があります

最初はあまり意味がなかったので、開発者に相談しました。彼は、デバイスの幅に応じて異なるCSSと異なるマークアップを提供するのが一般的な方法であると述べて答えました。

このアプローチはまだ少し奇妙に思えます。HTMLマークアップ全体を書き直したい場合は、同じグリッドシステム（たとえば16）を使用し、すべての.grid_{x}クラスを変更して.grid_{x*2}小さな画面に対応することもできます...右？

grid_3Adapt.jsのアプローチは実装と管理が簡単なようですが、いくつかの注意点も見つけることができます。画像またはテキストのスニペットはクラス内にどのようにうまく収まるのでしょうか。その幅は、2520.cssバリアントでもauto、からまでの範囲である可能性がありますか？220px610px

では、レスポンシブWebデザインとグリッドシステムに関する現在のベストプラクティスは何ですか？また、CSSメディアクエリはグリッド（列幅）に影響を与える必要がありますか？現状では、単一のマークアップとスタイルシートを提供し、ブラウザにレンダリング/スケーリングを行わせるのが最善のアプローチであると私は信じる傾向があります。

私はこれでかなりグリーンなので、どんな助けでもありがたいです-ありがとう。

レスポンシブeコマースウェブサイトを開発しています。それはかなり難しいですが、私はそれが好きです:)

カートの場合、棚に商品カテゴリを表示し、オーバーレイで単一の商品を表示することにしました。

こちらをご覧ください

問題は、それらの数や視聴者のウィンドウの大きさがわからないため、適切な方法でスタイルを設定することはほとんど不可能であるということです。

この可変長データを表示するためにどのようなパターンを使用できますか？また、それをどのように達成しますか？

そのため、私はメディアクエリを多用する最初のレスポンシブウェブサイトに取り組んでいます。最適化する必要のある一般的なページ幅があるかどうか疑問に思いました。

私はおそらく最大幅を持っているでしょう（完全に流動的になることはありません）私はおそらく3-5セットの幅を持ち、それらの間の小さなCSS3トランジションを楽しんでいると思います（CSSトリックの動作と同様）。

現在、私が使用している数字はやや恣意的です。

また、一部のモバイルデバイスが期待どおりに動作しないことを読んだと思います（with @media）。これはどこで発生し、これらの状況にどのように対処する必要がありますか？

新しいレスポンシブ フレームワークを使用してサイトを構築することを検討しています。私はいくつかのテストを行いましたが、標準で非レスポンシブ Web サイトで使用している効果を得ました。これは Jquery ロールオーバーであり、スプライトを使用して画像をグレー/カラーにし、ロールオーバーするとグレーが色にフェードしますホバー時に画像のオンとオフを切り替えるテキスト付き。

私の問題は、レスポンシブサイトの画像の高さがピクセル単位で固定されていないため、これを適応させると、画像が明らかに画像のグレー/カラーの両方の側面を示していることです。% の高さと幅を実行しようとすると、画像の間違った部分がすぐに表示され始めるため、縮小すると明らかにこれは機能しません。

これを回避する方法を知っている人はいますか?サムネイルにこの効果を生成するには、レスポンシブな方法が必要です。アップロードされた例を取得して、これまでに得たものを確認できるようにします。

私のJquery：

私はここで基本的なことをやっています.Jqueryのオーバーレイには自信がありません. これを適応させるためのアイデア。

EDIT** : http://www.visualdecree.co.uk/test/index.html - テストの簡単なまとめページを示します。うまくいけば、私が何をしているかを示すのに役立ちます。

よろしくM

レスポンシブ デザインを作成するときにコンテンツの流れを変更するために Adactio ソリューションを使用しようとしています - http://adactio.com/journal/4780/ しかし、ページ内のリンクをタブで移動できなくなった Firefox でバグを取得します。例については、 http://jsbin.com/axobunを参照してください。

この問題の代替ソリューションまたは修正を考えられる人はいますか?

I'm building a responsive site but don't want to just hide elements for smaller screens, I want to remove them completely to reduce load times.

I've got this working so far with

The class .widescreen is added to all elements that are only to be loaded on screens wider than 768px

I then want this to work if a user resizes the browser window (or turns a device 90°) so I tried this:

Which works but only when a window is resized not loaded at the smaller size. Which I guessed would happen.

Is there a way of achieving this so it works both when a page is loaded and when the browser window is resized?

Then, of course, the trick is to add the content back when the window is resized to wider than 768px! But I'll try to figure that one out if the first part is actually possible!!

Comcast のリスト ページに似たレイアウトを設計しています: http://xfinitytv.comcast.net/movies

ウィンドウのサイズを変更すると、別のポスターを表示するスペースが十分にない場合でも、右側に空白のスペースができることがよくあります。ポスターが常にぴったり収まるレイアウトを作成したい (右側にスペースがない)。

問題は、ポスターにパーセンテージベースの幅を適用できないことです。ポスターは 180px の固定幅のままです。私の理論では、パーセンテージ ベースのマージンとメディア クエリを使用することでしたが、次のような欠点があります。それはちょうど正しく感じませんでした。

理想的には、次のように動作します。画面サイズが x と x の間にある場合、8 枚のポスターが一列に並んでいます。画面サイズが x と x の間の場合、ポスターが 7 枚並んでいます。また、ポスター間のすべてのスペースは余白に均等に配分されます。このように、メディア クエリ風のソリューションを使用して x 数のポスター アートを表示し、jquery を使用してマージンを計算して分配します。ポスターは常に画面の一番右端で終わります。

これについて何か良い方法はありますか？ブラウザー ウィンドウのサイズが変更されたときに (ページの読み込み時だけでなく) 動作する必要があります。

レスポンシブ デザインに移行して、画像に %s を使用しています。

Internet Explorer 8 以下を除いて、これはうまく機能します。height: autoこれは、IE9 以降でのみサポートされている CSS3 の一部であるためですか?

そして最も重要な部分は...この問題を回避する方法について何か提案はありますか? これまでに考えられる唯一のことは、最大高さを与えることです。

ありがとう

レスポンシブな投稿内で画像を簡単に作成できますが、カスタム投稿タイプのサムで同じ b/c WP が自動的に幅と高さを挿入するのに問題があります。これらのデフォルトの幅/高さを少なくともオーバーライドする方法を探しています。誰でもこれに対する解決策を持っていますか？

前もって感謝します！- j