3

我非常热衷于在我的 CSS 中使用媒体查询，但我对如何使用它感到困惑。我有立场

我的查询要求是

如果屏幕宽度是 100 到 480 则不同的风格来了，

如果屏幕宽度为 481 到 600 则不同的风格来了，

如果屏幕宽度 601 到 800 则不同的风格来了，

如果屏幕宽度为 801，则默认 CSS 应该可以工作。

4

3 回答 3

6 
.class { /* default style */ }

@media (min-width: 100px) and (max-width: 480px) {
 .class { /* style */ }
}

@media (min-width: 481px) and (max-width: 600px) {
 .class { /* style */ }
}

@media (min-width: 601px) and (max-width: 800px) {
 .class { /* style */ }
}
于 2012-07-18T07:01:24.690 回答
2

基本依赖于使用这种查询：

@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make 
your site pretty on this range.*/
}

请记住，在使用响应式网页设计时，您应该尽可能使用百分比，字体也应使用 em。

媒体查询现在可用于 IE。当您可以使用它们时，请查看http://caniuse.com/#feat=css-mediaqueries 。我使用的一个效果很好的 polyfil 是 response.js

于 2012-07-18T07:03:58.090 回答
1

我相信类似的东西：

@media screen and (min-width: 100px) and (max-width: 480px)
{
    /* Change main container '.wrapper' */
    .wrapper
    {
        width: 100px;
    }
}

@media screen and (min-width: 480px) and (max-width: 600px)
{
    .wrapper
    {
        width: 480px;
    }
}

..ETC

于 2012-07-18T06:59:00.067 回答