Html 为什么CSS3媒体查询@media（最大宽度）不起作用

我正在尝试将一些响应性设计应用到网站中。我不明白为什么我在应用以下媒体查询时遇到问题。谢谢你的帮助。 HTML的一部分（index.HTML）

---

您需要添加

display:flex内部#导航栏

首先，永远不会应用“mobile.css”文件的样式，因为您在meta标记中指定了表达式：
media='screen and（min width:1100px）
，它告诉浏览器为屏幕宽度>=1100px的设备应用样式，因此在该表达式下面，将不会应用“mobile.css”样式

其次，在屏幕宽度>=1100px的情况下，移动样式将不会应用，因为您添加了另一个具有不同规则的媒体查询
@media（max width:500px）
，该规则告诉浏览器如果屏幕宽度低于500px，则应用样式，而在屏幕宽度>=1100px的情况下，它将永远无法工作

要解决您的问题，只需保留一条表达式规则，将mobile.css文件的样式应用于较小屏幕的宽度（还需要@media和（功能）之间的空间）。更多信息请参见：
<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'> 

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

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

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

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