如何正確使用css媒體查詢進行響應式設計

我遇到媒體查詢問題。我希望我的主div的寬度爲960像素，但如果屏幕小於960像素 - 我希望它是任何當前寬度的80％。如何正確使用css媒體查詢進行響應式設計

我從960px只得到80％，而不是80％（例如：800px的80％，700px的80％）。

HTML：

<body> 
    <div class="main"> 
     Some big amound of text 
    </div> 
</body>

CSS：

body{ 
    width:100%; 
} 

.main { 
    display: block; 
    height: 600px; 
    width: 960px; 
} 

@media (max-width: 960px) { 
    .main { 
     width:80%; 
    } 
}

我希望它是液體，但它是在2個位置只有固定的：960像素和80％的960像素 - 怎麼辦我讓它變得流暢？

來源

2011-11-26 Alon

您需要發佈更多的html和css。也許在http://jsfiddle.net重新創建問題，因爲此時您發佈的CSS應該正常工作。 – tw16

你使用什麼瀏覽器？我已經測試了您在最新版本的Safari，Chrome，Firefox和Opera for OSX中提供的代碼，並且您可以按照自己的意願進行操作。 – bookcasey

它在鉻中工作。我正在使用火狐5.0 - 我想這是問題...將更新它，並重新檢查。 – Alon

我解決了這個問題 -

我用的Firefox 5.0，我假定不支持此功能 - 我想這就是問題所在。

來源

2011-11-26 21:27:01 Alon

爲了其他任何發現這種情況的人 - Firefox自3.5版以來支持媒體查詢。我不確定爲什麼你的FF5副本不工作，但這不是因爲缺乏媒體查詢支持。這是一個演示頁面。我在FF3.6中測試過它，它工作正常：http://oscorp.net/experiments/media-queries/

來源

2012-06-28 18:31:17

如何正確使用css媒體查詢進行響應式設計

回答

相關問題