Почему медиа-запрос CSS3 @media (max-width) не работает

Question

Я пытаюсь применить адаптивный дизайн к веб-сайту. Я не понимаю, почему у меня возникает проблема, когда я применяю следующий медиа-запрос. Спасибо за помощь. Часть HTML (индекс. 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 часть, в которой медиа-запрос не работает. (мобильный. css)

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

Answer 1

Во-первых, стили файла «mobile. css» никогда не будут применяться, потому что вы указали в метатеге выражение: media='screen and (min-width: 1100px)', которое сообщает браузеру применять стили для устройств с шириной экрана> = 1100 пикселей. , поэтому ниже стили «mobile. css» применяться не будут.

Во-вторых, в случае ширины экрана> = 1100 пикселей мобильные стили не будут применяться, потому что вы добавили другой медиа-запрос с другим правилом @media(max-width: 500px), которое сообщает браузеру применить стиль, если ширина экрана ниже 500 пикселей, в то время как ширина экрана> = 1100 пикселей, это никогда не сработает ...

Чтобы решить вашу проблему , просто сохраните одно правило выражения, чтобы применить стили файла mobile. css для меньших экранов шириной (<= 500 пикселей), например: </p>

<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

Answer 2

Вам нужно добавить display:flex; внутри # navbar

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