問題タブ [adaptive-design]

私はいくつかのプロジェクトで SMACSS を使用していますが、通常は 1 つの問題に直面しています。それは、アダプティブ コンテンツ モジュールを構築する正しい方法です。

たとえば、LAYOUT グリッド クラス (.container、.row、.span-1、.span-N) + アダプティブ デザイン用のメディア クエリがあります。

たとえば、リンクリストを列に分割するなど、コンテンツモジュールに同じルールを使用して適応動作を管理したいと思います。

次のように LAYOUT クラスを MODULE 要素に追加して管理できます。

しかし、このアプローチは LAYOUT と MODULE の間の密結合を引き起こし、モジュールは LAYOUT から独立している必要があるという SMACSS の主なルールを破ります。

もう 1 つの方法は、特別なモジュール (.adapt) をビルドし、次のようにコンテンツ モジュールをその中に入れます。

この方法はルールに違反していませんが、HTML マークアップがオーバーロードされているように見えます。

質問 - SMACSS でアダプティブ コンテンツ モジュールを構築する方法は何ですか?

MVC には、「system.web.webpages」というプロジェクトで参照できる dll があり、これを使用して、以下のように global.asax ファイルの「application_start」メソッド内でアダプティブ レンダリングを実行します。

Web フォームに同様の機能はありますか?

可能であれば、モバイル マスターページを含む別のモバイル フォルダーを作成し、preinit イベントをチェックインして、モバイル マスターページをレンダリングするように切り替えたくありません。特定のタイプのモバイルデバイスなどをチェックするのは明らかに柔軟ではありません.

画像でFoundation 4 Revealを使用するオプションはありますが、要素をクリックしてモーダルを開くときにのみロードするオプションはありますか?

私の目標: Interchange を使用して Adaptive Lightbox を作成します。ユーザーがサムネイルをクリックすると、 Interchange for Adaptive Imagesを利用してフルスクリーンで画像が表示されるため、小さな画像は小さな画面にロードされ、大きな画像は大きな画面解像度にロードされます。

アダプティブ イメージの使用で何らかの問題が発生しました。( http://adaptive-images.com )

ローカルとオンラインの両方で数か月間 AI を実行してきましたが、まったく問題はありませんでした。ちょうど今週末、ページ上の画像を、元の画像と同じディレクトリにある新しい png 画像に置き換えようとしました。以前の画像は jpg でした。新しいイメージはローカル バージョンではロードされず (オンライン バージョンでは動作します)、コンソールには次のように表示されます。

リソースのロードに失敗しました: サーバーは 500 のステータスで応答しました (内部サーバー エラー)

これらは、問題を解決するために私が試みた手順です (すべてうまくいきませんでした):

• 確認して再度確認した、ファイルへのパス。前述のように、唯一の違いは、これが jpg ファイルではなく png ファイルであることです。
• 同じpngファイルを再度追加しましたが、名前が異なります。
• 使用する Photoshop とはまったく異なる png を作成しました。
• ai-cache フォルダーに png が作成されているかどうかを確認しましたが、そうではありません。
• imageAlpha や imageOptim などの最適化ソフトウェアを使用していない完全に新しい png ファイルを作成しました — ここに何かがファイルを破損していると考えています。
• さまざまなブラウザーで表示されます。
• MAMP サーバーを再起動しました。
• マックを再起動しました。
• MAMPを再インストールしました。
• 叫んだ。

これは私が試したもので、うまくいきました：

• 画像を元の jpg と新しい jpg に置き換えました。画像が正常に読み込まれ、バージョンが ai-cache に作成されます。
• .htaccess ファイルを使用したアダプティブ イメージの無効化 — png ファイルはすべて期待どおりに読み込まれますが、もちろん AI は実行されなくなりました。
• jpg を使用 — 画像には透過性が必要なため、理想的ではありません。
• 編集： 8ビットのpngを使用しても機能しますが、私が好む24ビットではまだ運がありません。

ここで、興味深いことがわかりました。Photoshop CC で作成されていないpng ファイル (標準のスクリーンショット) を使用しました。ローカル インストールでは、画像は問題なく表示されます。ただし、小さいバージョンは ai-cache 内に作成されません。オンライン セットアップで同じスクリーンショット ファイルを使用すると、画像も正常に表示され、ai-cache で作成されたバージョンも含まれます。

また、Photoshop CC から作成したすべての png ファイルは、ブラウザで直接開いたときにも完全に表示されることも指摘しておく価値があります。また、Photoshop CC で作成された以前の png ファイルもあり、それらはまだ正常に表示されており、ai キャッシュにバージョンがあります。

私は本当に次にどこを見るべきかについてちょっと立ち往生しています。私が差し引いたように見える唯一のことは、正しく読み取っていないPhotoshopからのpngファイルに何かがあるに違いないということです. 私が理解していないのは、インストール/ファイル (MAMP、Photoshop、Adaptive Images、htaccess) が過去数日間変更/更新されていないことです。

どんな助けや提案も大歓迎です、ありがとう!

.htaccess必要に応じて、ファイル内の適応画像コードを以下に示します。

私はアダプティブ イメージの標準インストールを使用していますが、含まれている php ファイルをまだ見ていない場合は、以下を参照してください。

異なる解像度に正確に適合させるにはどうすればよいですか(つまり、高さと幅の両方) 。縦横比と左、上などの位置を維持しながら、画面の解像度に従って画像要素を縮小する方法。どのようなアプローチをとればよいか教えてください。解像度ごとに異なる画像を作成することは唯一のオプションですか?

参照を確認してください。同様の結果が必要です。すべての要素は、すべての解像度でうまく適応しています - blacknegative.com

HTMLとJqueryを使用!!!

私は自分のconcrete5 5.6.2.1サイトにadaptive-images.php ( http://adaptive-images.com )をインストールしましたが、問題はなく、ブラウザが画像をロードすると起動するように見えます。ただし、src 属性は置き換えられません。

問題の画像は、ProBlog パッケージによって制御されるブログ投稿にあります。Concrete5 (ProBlog?) は、独自の src 属性をキャッシュされた画像に入れているようです。私は、adaptive-images.php がそれを行った後だと思います。

そうでないかもしれない。

このセットアップで成功した人はいますか? 他に探す必要がある場所はありますか？

ボブ

残念ながら、私が電子メールを送信するために使用しているプログラムでは、@media クエリや、コードの先頭にある .css リストを使用できません。フローティング列に基づいて電子メール テンプレートを作成しているため、これは問題です。タブレットまたはデスクトップで表示しているときに 2 つの列を隣り合わせに表示したいのですが、モバイル デバイスで表示しているときにリストをコンテンツ パネルの下にドロップします。

これが私が持っているもののベースです：