調整窗口

的時候爲什麼不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

回答

相關問題