如何正确使用 CSS 媒体查询进行响应式设计答案

【问题标题】：How to use css media queries correctly for responsive design如何正确使用 CSS 媒体查询进行响应式设计
【发布时间】：2012-06-29 02:31:17
【问题描述】：

我对媒体查询有疑问。我希望我的主要div 的宽度为 960 像素，但如果屏幕小于 960 像素 - 我希望它是当前宽度的 80%。

我只从 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 像素和 960 像素的 80% - 我如何让它变得流畅？

【问题讨论】：

您需要发布更多的 html 和 css。也许在jsfiddle.net 中重新创建问题，因为此时您发布的 CSS 应该可以正常工作。
你用的是什么浏览器？我已经测试了您在最新版本的 Safari、Chrome、Firefox 和 Opera for OSX 中提供的代码，它可以按照您所说的那样工作。
它在 chrome 中工作。我使用的是 firefox 5.0 - 我想这就是问题所在......将对其进行更新并重新检查。
好的 - 问题出在旧的 firefox 浏览器上。

标签： html css responsive-design

【解决方案1】：

为了其他发现这一点的人——Firefox 从 3.5 版开始支持媒体查询。我不确定为什么您的 FF5 副本不起作用，但这不是因为缺乏媒体查询支持。这是一个演示页面。我在FF3.6中测试过，效果很好：http://oscorp.net/experiments/media-queries/

【讨论】：

【解决方案2】：

我解决了问题 -

我使用的是 firefox 5.0，我认为它不支持此功能 - 我想这就是问题所在。

【讨论】：