2016-08-04 7 views
2

私のHTMLページには2つのCSSファイルがあり、Chromeは800px以下では1を使用し、801px以上では小さいものを使用します。画面の大きさに関係なく大きい方を表示します。Firefoxは小さいサイズの画面にCSSを使用していません

<html> 
<head> 
<link href="big.css" text="text/css" media="screen and (min-device-width:801px)" rel="stylesheet" /> 
<link href="small.css" text="text/css" media="screen and (max-device-width:800px)" rel="stylesheet" />  
</head> 
</html> 

h1 { 
    margin: 5%; 
    text-align: center; 
} 
h2 { 
    margin: 5%; 
    text-align: center; 
} 

CSSは小さくはありますが、表示方法が異なります。非常にこれに新しい、助けてください。

+1

デスクトップブラウザでテストする場合は、min/max-device-widthクエリを使用しないでください。 'min-width'と' max-width'で動作するかどうか確認してください。 –

+0

ありがとうございます。私は大きなファイルに最大幅として何を入れますか? –

+0

firefoxが完全に2番目のファイルを無視しているかのように –

答えて

1

のように@Michael_Bは言った:min-widthmax-width、ないmin/max-device-width。あなたはデバイスの幅を照会していません。あなたはビューポートの幅に興味があります。

同じ値(それぞれ800pxと801px)を使用すると効果があります。

+0

お返事いただきありがとうございますが、今は大きなサイズ(2000px -801pxが使用されています)です。小さなファイルが変更されても変更は見られません。 –

+0

小さいファイル= 800-1px –

+0

オペラ/モザイアのフォントサイズなどを変更するには?クロムのものに影響を与えるこのCSSファイルで? –

関連する問題