Question

我遇到媒体查询问题。我希望我的主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个位置：960px和960px的80％ - 我如何让它变得流畅？

Answer 1

为了找到这个的其他人 - 自3.5版以来，Firefox支持媒体查询。我不确定为什么你的FF5副本不起作用，但这不是因为缺乏媒体查询支持。这是一个演示页面。我在FF3.6中进行了测试，它运行正常：http://oscorp.net/experiments/media-queries/

Answer 2

我解决了这个问题 -

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

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

2 个答案: