如何正确使用 css 媒体查询进行响应式设计 [英] How to use css media queries correctly for responsive design
问题描述
我有媒体查询问题.我希望我的主要 div 的宽度为 960 像素，但如果屏幕小于 960 像素 - 我希望它是任何当前宽度的 80%.
我只从 960px 中得到 80%，而不是从所有较小的东西中得到 80%(例如:800px 的 80%，700px 的 80%).
HTML:
<div class="main">一大堆文字CSS:
body{宽度:100%；}.主要的 {显示:块；高度:600px；宽度:960px；}@media(最大宽度:960px){.主要的 {宽度:80%；}}我希望它是流畅的，但它只固定在 2 个位置:960 像素和 960 像素的 80% - 我如何使它流畅?
为了其他发现这个问题的人 -- Firefox 从 3.5 版开始支持媒体查询.我不确定为什么您的 FF5 副本不起作用，但这不是因为缺乏媒体查询支持.这是一个演示页面.我在 FF3.6 中对其进行了测试，效果很好:http://oscorp.net/experiments/media-查询/
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屋！
