1

デスクトップ PC を使用しているときに、ページが間違った css ファイルをロードする理由を理解しようとしています。

これが私が持っているコードです:

<link href="<?php echo base_url('assets/css/bootstrap.css')?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="<?php echo base_url('assets/css/rh-mobile.css')?>" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 767px)" href="<?php echo base_url('assets/css/rh-tablet.css')?>" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 3000px)" href="<?php echo base_url('assets/css/rh.css')?>" />

Firefox の Web コンソールを確認すると、次のようなエラー メッセージが大量に表示されていることがわかります。

[11:54:09.149] Error in parsing value for 'font-weight'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:13

[11:54:09.150] Unknown property '-moz-border-radius'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:22

[11:54:09.150] Error in parsing value for 'background-image'. Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:74

[11:54:09.150] Unknown property '-moz-box-shadow'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:170

モバイルCSSを使用しようとするとは思っていませんでした。デスクトップの画面解像度は 1920 X 1200 です。

なぜ rh-mobile.css がロードされているのか、どこが間違っているのか教えていただけますか?

ありがとう。

4

1 に答える 1

1

直観的に、ブラウザーは必要な CSS ファイルのみをダウンロードすると考えるかもしれませんが、ほとんどのブラウザーはすべての CSS ファイルを取り込み、ビューポートに基づいて関連するスタイルを適用するようです。このページのコメントは、より技術的な背景を提供します。

たぶんそれは理にかなっています。別の方法としては、ウィンドウの幅を変更するたびに、ブラウザーは戻って head コンテンツをチェックし、別の CSS ファイルをダウンロードする必要があるかどうかを確認する必要があります。

したがって、rh-mobile.css スタイルシートがダウンロードされていることがわかりますが、投稿した内容から、スタイルが実際に適用されることはわかりません。

どの CSS ファイルが読み込まれるかを実際に完全に制御する必要がある場合は、Adapt.js、YepNope、Modernizrなどのオプションがあります。これらはすべて、CSS、JS、またはその他のファイルの詳細を指定する前に、javascript を使用して視点の幅をテストするという同じ考え方のバリエーションです。

幸運を！

于 2013-03-28T02:34:06.503 に答える