Html 如何正确使用css媒体查询进行响应性设计_Html_Css_Responsive Design

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

html css responsive-design

Html 如何正确使用css媒体查询进行响应性设计,html,css,responsive-design,Html,Css,Responsive Design,我对媒体查询有意见。我希望我的maindiv的宽度为960px，但如果屏幕小于960px，我希望它是任何当前宽度的80% 我只从960px中获得80%，而不是从所有更小的东西中获得80%（例如：800px的80%，700px的80%） HTML: <body> <div class="main"> Some big amound of text </div> </body> body{ width:100

我对媒体查询有意见。我希望我的main

div

的宽度为960px，但如果屏幕小于960px，我希望它是任何当前宽度的80%

我只从960px中获得80%，而不是从所有更小的东西中获得80%（例如：800px的80%，700px的80%）

HTML:

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

body{
    width:100%;
}

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

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

我希望它是流体，但它只固定在两个位置：960px和960px的80%-我如何使它流体化？

我解决了这个问题-

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

我解决了这个问题-

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

为了其他人的利益，firefox从3.5版开始就支持媒体查询。我不知道为什么您的FF5副本不能工作，但这不是因为缺少媒体查询支持。这是一个演示页面。我在FF3.6中对它进行了测试，它工作得很好：

为了其他人，Firefox从3.5版开始就支持媒体查询。我不知道为什么您的FF5副本不能工作，但这不是因为缺少媒体查询支持。这是一个演示页面。我在FF3.6中对其进行了测试，效果很好：

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