如何正确使用CSS媒体查询进行响应式设计 [英] How to use css media queries correctly for responsive design
问题描述
div 的宽度为960像素，但如果屏幕小于960像素 - 我希望它是任何当前宽度的80％。 我从960px只得到80％，而不是80％（例如：800px为80％，700px为80％）。
HTML：
< body>
< div class =main>
一些大文本
< / div>
< / body>
CSS：
body {
width：100％;
}
.main {
display：block;
height：600px;
width：960px;
}
@media（max-width：960px）{
.main {
width：80％;
$ / code $ / pre
我希望它是流畅的，但它只是固定的在2个职位上：960px和960px的80％ - 我如何让它变得流畅？ 为解决方案中的其他人发现这一点 - 自3.5版以来，Firefox已经支持媒体查询。我不确定为什么你的FF5副本不工作，但这不是因为缺乏媒体查询支持。这是一个演示页面。我在FF3.6中测试过它，它工作正常： http://oscorp.net/experiments/media -queries /
I have an issue with media queries. I want my main div to have a width of 960px but if the screen is smaller than 960 px - I want it to be 80% of any current width.
I get only 80% from 960px and not 80% out of everything smaller (for example: 80% of 800px, 80% of 700px).
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%;
}
}
I want it to be fluid but it is fixed only on 2 positions: 960px and 80% of 960px - how do I make it fluid?
解决方案 For the sake of anyone else who finds this -- Firefox has supported media queries since version 3.5. I'm not sure why your copy of FF5 wasn't working, but it wasn't due to a lack of media query support. Here's a demo page. I tested it in FF3.6, and it works fine: http://oscorp.net/experiments/media-queries/
这篇关于如何正确使用CSS媒体查询进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
