调整窗口

的时候为什么不DIV变得可见我有显示了一个问题：在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时，方块应该变为可见，但它不起作用。

有人可以告诉我我做错了什么吗？由于

来源

2015-08-08 Andrew Hu

你必须在你的代码没有打开的HTML标签。你可能想解决这个顺便说一句 –

移动以下.grabber规则集的@media查询。正在发生的是，您的第二个定义.grabber正在覆盖媒体查询中的内容。这只是CSS的工作方式！

来源

2015-08-08 02:29:33 geoff

你应该使用最小宽度，它的意思是“如果宽度超过800像素使用它”

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

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

来源

2015-08-08 02:29:06 AleshaOleg

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

HTML代码：

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

来源

2015-08-08 02:52:35

回答

相关问题