2013-07-30 123 views
6

我正在使用媒體查詢爲客戶端製作網站的移動版本。當我調整瀏覽器的大小時,媒體查詢不起作用,但是當在每個設備上查看網站時,它們確實生效 - 我只是好奇爲什麼媒體查詢在調整瀏覽器窗口本身的大小時不起作用即Firefox。媒體查詢不會對瀏覽器調整大小

任何輸入,非常感謝。

代碼我使用:

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

儘管您確實描述了您的問題,但是非常感謝能夠看到一些代碼。添加一些代碼,以便您的問題具有更高的價值 –

回答

18

你沒有張貼的代碼的例子,所以我猜:如果您使用的屬性:最大設備寬度或分設備寬度,它只會在具有該寬度的設備上工作,並且會忽略手動瀏覽器調整大小。

您應該將屬性更改爲:max-width/min-width。

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

入住這裏:

在CSS介質寬度和設備寬度之間的差別可能有點糊塗 ,所以讓我們闡述了對位。設備寬度指的是設備本身的寬度,換句話說,該設備的屏幕分辨率爲 。

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

+0

如上所述添加代碼。 –

+0

我猜對了,只是做我說的:) –

+0

耶,非常感謝! –

1

改變你的代碼 -

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

交替,你可以保留原來的代碼和Mozilla的響應式設計視圖功能檢查本地計算機您的網站的響應本質 - 快捷方式「 Control + Shift + M'

相關問題