Question

我对媒体查询有一个非常基本的问题

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

     <!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>

Answer 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;

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

屏幕上的媒体查询拖动/调整大小不起作用

1 个答案: