為什么 CSS3 媒體查詢 @media(max-width) 不起作用

Question

我正在嘗試將一些響應式設計應用到網站中。 我不明白為什么我在應用以下媒體查詢時會遇到問題。 謝謝您的幫助。 HTML (index.html) 的一部分

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content ='ie-edge'>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
    <link rel ='stylesheet' href='css/style.css'>
    <link rel='stylesheet' media='screen and (max-width: 768px)' href ='css/widescreen.css'>
    <link rel='stylesheet' media='screen and (min-width: 1100px)' href ='css/mobile.css'> 

媒體查詢不起作用的 CSS 部分。 (mobile.css)

/*Smartphones */
@media(max-width: 500px){
  #navbar {
    flex-direction: column;
    align-items: center;
  }
}

Answer 1

您需要添加display:flex; 在#navbar里面

@media(max-width: 500px){
  #navbar {
    display:flex; /*new*/
    flex-direction: column;
    align-items: center;
  }
}

Answer 2

首先，“mobile.css”文件的 styles 將永遠不會被應用，因為您在元標記中指定了表達式： media='screen and (min-width: 1100px)' ，它告訴瀏覽器將 styles 應用於具有屏幕寬度 >= 1100px，因此低於此值，將不會應用“mobile.css”styles。

其次，如果屏幕寬度 >= 1100px，移動端 styles 將不會被應用，因為您添加了另一個具有不同規則@media(max-width: 500px)媒體查詢，它告訴瀏覽器在屏幕寬度為低於 500 像素，當我們處於屏幕寬度 >= 1100 像素時，它永遠不會工作......

要解決您的問題，只需保留一個表達式規則來應用 mobile.css 文件的 styles 以用於較小的屏幕寬度（<= 500px），例如：

<link rel='stylesheet' media='screen and (max-width: 500px)' href ='css/mobile.css'> 

然后，刪除“mobile.css”中重復的媒體查詢規則：

#navbar {
   flex-direction: column;
   align-items: center;
   display: flex;
}

有用的鏈接：

• 有關使用媒體查詢的更多信息，請參閱此鏈接
• 您必須添加屬性“display: flex”才能使用屬性“flex-direction”和“align-items”， 有關 flexbox 的更多詳細信息，請參閱此鏈接