為什么媒體查詢中的最大寬度不起作用

Question

我寫了這段代碼，但它不起作用

@media  (max-width: 767px){  

.navbar-brand {     
     padding-top: 10px;     
     height: 80px;  
}  
.navbar-brand h1{   
     padding-top: 10px;     
     font-size: 5vw;  
}  
.navbar-brand p {   
     font-size: .6em;   
     margin-top: 12px;  
}  
.navbar-brand p img {       
     height: 20px ;  
}  

#collapsable-nav a {    
     font-size: 1.2em; 
}  

#collapsable-nav a span{    
     font-size: 1em;  
} 
}

當屏幕小於767px時，我想更改我的navbar ，但它根本不起作用。

Answer 1

使用最小寬度而不是使用最大寬度

@media (min-width: 767px) {
      .navbar-brand {
        padding-top: 10px;
        height: 80px;
      }
      .navbar-brand h1{
        padding-top: 10px;
        font-size: 5vw;
      }
      .navbar-brand p {
        font-size: .6em;
        margin-top: 12px;
      }
      .navbar-brand p img {
        height: 20px;
      }
      #collapsable-nav a {
        font-size: 1.2em;
      }
      #collapsable-nav a span{
        font-size: 1em;
      }
    }

訪問以下鏈接以了解有關 css 中 min-widht 的更多信息： https://www.w3schools.com/cssref/playdemo.php?filename=playcss_min-width

Answer 2

在這種情況下，您應該為媒體查詢使用 min-width 。 請閱讀如何提出正確的問題並更新您的問題，以便我們更好地幫助您？