为什么 CSS3 媒体查询 @media(max-width) 不起作用

Question

I am trying to apply some responsive design into the website. I do not understand why I have a problem when I apply the following media query. Thank you for your help. A part of 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 part in which media query is not working. (mobile.css)

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

Answer 1

You need to add display:flex; inside #navbar

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

Answer 2

First, the styles of "mobile.css" file will never be applied because you specified in the meta tag the expression: media='screen and (min-width: 1100px)' which tells the browser to apply the styles for devices with a screen's width >= 1100px, so below that, the "mobile.css" styles will not be applied.

Second, in case of a screen width >= 1100px, the mobile styles will not be applied because you added another media query with different rule @media(max-width: 500px) which tells the browser to apply the style if the screen's width is below 500px, while we are in a screen's width >= 1100px, it will never work...

To resolve your problem, just keep one expression rule to apply the styles of mobile.css file for smaller screens' width ( <= 500px ) like:

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

And then, remove the duplicated media query rule in "mobile.css":

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

Useful links:

• refer to this link for more informations about the use of media queries
• you have to add the property "display: flex" in order to use the properties "flex-direction" and "align-items", refer to this link for more details about flexbox