Question

我在display：none和HTML / CSS中的可见性选项

时遇到问题

我在这里设置了场景 https://jsfiddle.net/vntkpus6/5/

HTML: 
<!doctype html>
<body>
<div class="grabber"></div>
</body>
</html>

CSS:
@media (max-width: 800px) {
    .grabber {
        display: block;
        visibility: visible;
    }
}
.grabber {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-color: red;
    background-repeat: no-repeat
}

必须有一些我必须缺失的东西，似乎当我将窗口调整为800px时，方块应该变得可见，但它不起作用。

有谁能告诉我我做错了什么？谢谢

Answer 1

将@media查询移至.grabber规则集下方。发生的事情是你的.grabber的第二个定义覆盖了媒体查询中的内容。这就是CSS的工作方式！

Answer 2

你应该使用最小宽度，它意味着＆＃34;如果宽度超过800px使用它＆＃34;

@media (min-width: 800px) {
    .grabber {
        display: none;
    }
}

.grabber {
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-color: red;
    background-repeat: no-repeat
}

Answer 3

在这里你应该在.grabber之后使用媒体查询。请在下面的方式让我知道所有事情是否完美无缺。

HTML CODE：

 <!DOCTYPE html>
    <html>
        <head>
            <title>OFFSET</title>
            <link rel="stylesheet" type="text/css" href="style.css" media="all" />
        </head>
        <body>
            <div class="grabber"></div>
        </body>
    </html>

CSS代码：

.grabber {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-color: red;
    background-repeat: no-repeat;
}
@media all and ( max-width: 800px) {
    .grabber {
        display: block;
        visibility: visible;
    }
}

为什么在调整窗口

3 个答案: