ブラウザのサイズ変更でメディアクエリが有効にならない

Question

メディアクエリを使用して、クライアント用のモバイル版Webサイトを作成しています。ブラウザのサイズを変更すると、メディアクエリは有効になりませんが、サイトが各デバイスで表示されたときに有効になります。ブラウザウィンドウ自体のサイズを変更すると、メディアクエリが有効にならない理由が不思議ですすなわちFirefox。

ご了承ください。

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 720px) { 
    #container { 
     width: 100% !important; 
     } 
    } 

Answer 1

をあなたは、コードの例を投稿していなかったので、私は推測している：MAX-デバイス幅またはMIN-デバイス幅：あなたは属性を使用している場合、私が使用している

コードその幅のデバイスでのみ動作し、手動ブラウザのサイズ変更は無視されます。

属性をmax-width/min-widthに変更する必要があります。

@media screen and (min-width: 1024px){ 
    /* some CSS here */ 
} 

ここでチェック：CSSメディアで

幅とデバイス幅との差はそれほどビットということに詳説することができます、混乱ビット することができます。 device-widthは、デバイス自体の幅である を指します。つまり、デバイスの画面解像度は、 です。

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

にあなたのコードを変更する - 交互に、あなたの前のコードを維持し、Mozillaの応答デザインビュー機能により、ローカルコンピュータであなたのウェブサイトの応答性を確認することができます

@media only screen 
and (min-width : 320px) 
and (max-width : 720px) { 
#container { 
    width: 100% !important; 
    } 
} 

- ショートカット " Ctrl + Shift + M '