如何正确使用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媒体查询进行响应式设计

回答

相关问题