1

私はここで自分自身を混乱させていると思います。レスポンシブ デザインに少し慣れていないので、サイトの表示幅に基づいて 2 つのスタイルシートのうちの 1 つをインポートしようとしています。

ただし、以下を使用すると、Firebugで表示すると両方ともプルダウンするようです。

これは正しいです？私は何を間違っていますか？

私が達成したいのは、ブラウザの幅が940px未満の場合はresponsive.cssをプルし、それより大きい場合はfull.cssをプルすることです

私はすでにrespond.jsライブラリを含めていますhttps://github.com/scottjehl/Respond

@import url("/inc/Styles/full.css") (min-width: 940px);
@import url("/inc/Styles/responsive.css") (max-width: 940px) and (min-width: 100px);
4

2 に答える 2

5

はい、それは正しいです。いいえ、私が知る限り、あなたは何も悪いことをしていません。あなたはそれを考えすぎていると思います（そして、2番目のインポートで最小幅は本当に必要ありません）。

まだ読んでいない場合は、Ethan Marcotte のResponsive Web Designを読んでください。

于 2013-01-25T00:25:12.997 に答える
1

分離された css ファイル (@import による呼び出し) は、常にブラウザーによって自然に読み込まれます。Media Query はその問題を解決できません。関連する css ファイルだけをプルできるようにするには、CSS 以外のものを使用する必要があります。

その問題は、サーバー サイトとクライアント サイトの両方で処理できます。たとえば、.NET に 51degrees ライブラリを使用できます。

または、javascript ウィンドウ サイズ ディデクターを使用してウィンドウ幅の値を取得し、AJAX を介してその特定の css を呼び出すか、JS を介してリンク要素を作成することができます。

基本的に;

$(function(){ 
          if($(window).width() > 980){ 
              // your code etc.
          } else{ 
              // your code etc.
          }  
     });

こちらもチェックしてください jQueryで動的にロードされたインラインおよび/または外部CSSを適用する方法

于 2013-12-07T03:22:50.060 に答える