0

关于媒体查询，我有一个非常基本的问题

我已经建立了一些网站，这些网站可以很好地显示通过媒体查询调用的不同布局的内容，但是在桌面上查看它们并调整屏幕大小时，媒体查询不会被调用。关于我哪里出错的任何指示？

     <!DOCTYPE html>

    <html>
    <head>
        <title>Page Title</title>

        <style>
            div{
                background:red;
                width:600px;
                height:200px;
            }
            @media (min-width: 61px AND max-width: 600px) {
div {
               background:green;
}
        }
        </style>
    </head>

    <body>
    <div>Something</div>


    </body>
    </html>
4

1 回答 1

1 
div {
  background:red;
  width:600px;
  height:200px;

  @media screen and (min-width: 61px) and (max-width: 600px) {
     background:green;
  }
}

http://jsfiddle.net/spacebeers/5NzrW/

您的媒体查询在 div 的选择器之外。就事情而言，您正在输出以下内容：

div {
    background:red;
    width:600px;
    height:200px;
}

background:green;

所以背景：绿色只是它自己。用顶部的示例替换您的代码，它应该没问题。

于 2012-08-23T09:54:20.207 回答